@oxy.so/bloom 2.9.0 → 2.11.0

package/src/media-header/parts.tsx

@@ -0,0 +1,443 @@
+import React, { useMemo, type ReactNode } from 'react';
+import { Image, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { Avatar } from '../avatar';
+import { Button } from '../button';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiHeart3Fill } from '../icons/remix/RiHeart3Fill';
+import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
+import { useImageResolver } from '../image-resolver/context';
+import { useContainerWidth } from '../hooks/use-container-width';
+import { Meter } from '../stat-bar';
+import { useInteractiveWebCss } from '../styles/interactive-web-css';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { TypeScaleVariant } from '../typography/scale';
+import { gradientStyle, MEDIA_HEADER_CSS, MEDIA_HEADER_STYLE_ID, MEDIA_HEADER_WIDE_MIN_WIDTH, resolveLikedGradient, resolveMediaHeaderPaint, type MediaHeaderPaint } from './shared';
+import { clamp01 } from '../styles/clamp';
+import { isImageUrl as isUrl } from '../image-resolver';
+import { webDataSet as webData } from '../styles/web-data';
+import type { MediaHeaderPerson, MediaImageSource } from './types';
+
+/** The family's paint for an artwork colour, plus its web sheet. */
+export function useMediaHeaderPaint(artworkColor?: string | null): MediaHeaderPaint {
+  const theme = useTheme();
+  useInteractiveWebCss(MEDIA_HEADER_STYLE_ID, MEDIA_HEADER_CSS);
+  return useMemo(() => resolveMediaHeaderPaint(theme, artworkColor), [theme, artworkColor]);
+}
+
+/** A URL passes through; an id goes through the ImageResolver. */
+export function useImageUri(source: MediaImageSource | undefined, variant?: string): string | undefined {
+  const resolver = useImageResolver();
+  if (!source) return undefined;
+  return isUrl(source) ? source : (resolver?.(source, variant) ?? undefined);
+}
+
+// ---------------------------------------------------------------------------
+//  Cover
+// ---------------------------------------------------------------------------
+
+export type CoverShape = 'square' | 'round' | 'book';
+
+export function Cover({
+  source,
+  size,
+  shape = 'square',
+  radius = 6,
+  liked = false,
+  shadow = true,
+  paint,
+  testID,
+  children,
+}: {
+  source?: MediaImageSource;
+  /** Width. `book` is 2:3, so its height is `size * 1.5`. */
+  size: number;
+  shape?: CoverShape;
+  radius?: number;
+  liked?: boolean;
+  shadow?: boolean;
+  paint: MediaHeaderPaint;
+  testID?: string;
+  children?: ReactNode;
+}) {
+  const theme = useTheme();
+  const uri = useImageUri(source, 'medium');
+  const height = shape === 'book' ? Math.round(size * 1.5) : size;
+  const r = shape === 'round' ? size / 2 : radius;
+  const frame: WebCssStyle = {
+    width: size,
+    height,
+    borderRadius: r,
+    backgroundColor: paint.placeholder,
+    boxShadow: shadow ? paint.coverShadow : undefined,
+  };
+  const clip: ViewStyle = {
+    width: size,
+    height,
+    borderRadius: r,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+  let inner: ReactNode;
+  if (liked) {
+    const [from, to] = resolveLikedGradient(theme);
+    const glyph = Math.round(size * 0.36);
+    inner = (
+      <View style={[clip, gradientStyle([from, to], 135)]}>
+        <RiHeart3Fill width={glyph} height={glyph} fill="#ffffff" />
+      </View>
+    );
+  } else if (uri) {
+    inner = (
+      <View style={clip}>
+        <Image source={{ uri }} style={{ width: size, height }} resizeMode="cover" />
+      </View>
+    );
+  } else {
+    const glyph = Math.round(size * 0.3);
+    inner = (
+      <View style={clip}>
+        <RiMusic2Line width={glyph} height={glyph} fill={paint.placeholderGlyph} />
+      </View>
+    );
+  }
+  return (
+    <View style={frame} testID={testID} importantForAccessibility="no-hide-descendants">
+      {inner}
+      {children}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+//  Frame: the band, its fade and the responsive cover + text layout
+// ---------------------------------------------------------------------------
+
+export interface FrameLayout {
+  wide: boolean;
+  /** The container width, or a desktop guess before the first layout. */
+  width: number;
+  /** Width left for the text column. */
+  textWidth: number;
+}
+
+export function MediaHeaderFrame({
+  paint,
+  cover,
+  coverWidth,
+  children,
+  actions,
+  centerCoverOnNarrow = true,
+  actionsFade,
+  backdrop,
+  style,
+  testID,
+}: {
+  paint: MediaHeaderPaint;
+  cover?: (layout: FrameLayout) => ReactNode;
+  /** Cover width at a layout, to size the text column. */
+  coverWidth?: (wide: boolean) => number;
+  children: (layout: FrameLayout) => ReactNode;
+  actions?: ReactNode;
+  centerCoverOnNarrow?: boolean;
+  /** The actions area's gradient. Default: the band's bottom colour into the page. */
+  actionsFade?: readonly string[];
+  /** Drawn behind the band's content, absolutely filled (a banner image). */
+  backdrop?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}) {
+  const { width: measured, onLayout } = useContainerWidth();
+  const width = measured ?? 1024;
+  const wide = width >= MEDIA_HEADER_WIDE_MIN_WIDTH;
+  const padX = wide ? 24 : 16;
+  const gap = wide ? 24 : 16;
+  const coverW = cover ? (coverWidth?.(wide) ?? 0) : 0;
+  const textWidth = Math.max(120, width - padX * 2 - (wide && cover ? coverW + gap : 0));
+  const layout: FrameLayout = { wide, width, textWidth };
+
+  const bandStyle: ViewStyle = {
+    paddingLeft: padX,
+    paddingRight: padX,
+    paddingTop: wide ? 72 : 24,
+    paddingBottom: 24,
+    gap,
+    flexDirection: wide ? 'row' : 'column',
+    alignItems: wide ? 'flex-end' : 'stretch',
+  };
+
+  return (
+    <View onLayout={onLayout} style={[{ backgroundColor: paint.background }, style]} testID={testID}>
+      <View style={[bandStyle, gradientStyle([paint.bandTop, paint.bandBottom])]}>
+        {backdrop}
+        {cover ? (
+          <View style={{ alignItems: !wide && centerCoverOnNarrow ? 'center' : 'flex-start' }}>
+            {cover(layout)}
+          </View>
+        ) : null}
+        <View style={{ flex: wide ? 1 : undefined, minWidth: 0, gap: 4 }}>{children(layout)}</View>
+      </View>
+      {actions ? (
+        <View
+          style={[
+            {
+              paddingLeft: padX,
+              paddingRight: padX,
+              paddingTop: 16,
+              paddingBottom: 24,
+            },
+            gradientStyle(actionsFade ?? [paint.bandBottom, paint.background]),
+          ]}
+        >
+          {actions}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+//  Text pieces
+// ---------------------------------------------------------------------------
+
+export function HeaderTitle({
+  children,
+  variant,
+  color,
+  level = 1,
+  numberOfLines,
+  testID,
+}: {
+  children: string;
+  variant: TypeScaleVariant;
+  color: string;
+  level?: number;
+  numberOfLines?: number;
+  testID?: string;
+}) {
+  return (
+    <Text
+      variant={variant}
+      role="heading"
+      aria-level={level}
+      numberOfLines={numberOfLines}
+      style={{ color }}
+      testID={testID}
+      {...webData({ bloomMediaHeaderTitle: variant })}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function Dot({ color }: { color: string }) {
+  return (
+    <Text
+      variant="body-medium"
+      importantForAccessibility="no"
+      accessibilityElementsHidden
+      aria-hidden
+      style={{ color }}
+    >
+      •
+    </Text>
+  );
+}
+
+/**
+ * A name that is a link when it has a handler, plain text otherwise.
+ *
+ * `Button variant="link" underline="hover"` — the underline-on-hover this drew
+ * by hand before `underline` existed. The COLOUR stays the caller's: it is
+ * contrast-picked against the band's artwork, so it overrides the palette's
+ * foreground through `textStyle` rather than taking a tone. `--bloom-btn-ring`
+ * is the web fork's focus-ring custom property, which is how the band hands it
+ * a ring that reads over its own colours.
+ */
+export function InlineLink({
+  label,
+  onPress,
+  color,
+  variant = 'body-semibold',
+  ring,
+  testID,
+}: {
+  label: string;
+  onPress?: () => void;
+  color: string;
+  variant?: TypeScaleVariant;
+  ring: string;
+  testID?: string;
+}) {
+  if (!onPress) {
+    return (
+      <Text variant={variant} style={{ color }} testID={testID}>
+        {label}
+      </Text>
+    );
+  }
+  const style: WebCssStyle = { '--bloom-btn-ring': ring };
+  return (
+    <Button
+      variant="link"
+      underline="hover"
+      size="small"
+      textVariant={variant}
+      accessibilityRole="link"
+      accessibilityLabel={label}
+      onPress={onPress}
+      style={style}
+      textStyle={{ color }}
+      testID={testID}
+    >
+      {label}
+    </Button>
+  );
+}
+
+/**
+ * The line under a title: people (up to three avatars, overlapped), then the
+ * given segments, joined by bullets. Wraps.
+ */
+export function MetaLine({
+  people,
+  segments,
+  color,
+  mutedColor,
+  ring,
+  testID,
+}: {
+  people?: readonly MediaHeaderPerson[];
+  segments: readonly (string | undefined | null | false)[];
+  color: string;
+  mutedColor: string;
+  ring: string;
+  testID?: string;
+}) {
+  const parts = segments.filter((s): s is string => typeof s === 'string' && s.length > 0);
+  const withAvatars = (people ?? []).filter((p) => p.avatar).slice(0, 3);
+  return (
+    <View
+      style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', columnGap: 4, rowGap: 2 }}
+      testID={testID}
+    >
+      {withAvatars.length > 0 ? (
+        <View style={{ flexDirection: 'row', marginRight: 4 }}>
+          {withAvatars.map((person, i) => (
+            <Avatar
+              key={`${person.name}-${i}`}
+              source={person.avatar}
+              name={person.name}
+              size={24}
+              style={i > 0 ? { marginLeft: -6 } : undefined}
+            />
+          ))}
+        </View>
+      ) : null}
+      {(people ?? []).map((person, i) => (
+        <React.Fragment key={`${person.name}-${i}`}>
+          {i > 0 ? <Dot color={color} /> : null}
+          <InlineLink label={person.name} onPress={person.onPress} color={color} ring={ring} />
+        </React.Fragment>
+      ))}
+      {parts.map((part, i) => (
+        // The bullet travels with its segment, so a wrap never strands it at a line end.
+        <View key={`${part}-${i}`} style={{ flexDirection: 'row', alignItems: 'center', columnGap: 4 }}>
+          {i > 0 || (people?.length ?? 0) > 0 ? <Dot color={mutedColor} /> : null}
+          <Text variant="body-medium" style={{ color: mutedColor }}>
+            {part}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/** A thin determinate `Meter`. */
+export function ProgressBar({
+  value,
+  label,
+  fill,
+  rail,
+  width,
+  testID,
+}: {
+  value: number;
+  label: string;
+  fill: string;
+  rail: string;
+  width?: number;
+  testID?: string;
+}) {
+  const pct = Math.round(clamp01(value) * 100);
+  return (
+    <Meter
+      value={pct}
+      max={100}
+      height={4}
+      width={width}
+      fill={fill}
+      track={rail}
+      accessibilityLabel={label}
+      valueText={`${pct}%`}
+      testID={testID}
+    />
+  );
+}
+
+/** Text clamped to `lines`, with a "Show more" toggle that carries `aria-expanded`. */
+export function ClampedText({
+  children,
+  lines,
+  color,
+  linkColor,
+  ring,
+  showMoreLabel = 'Show more',
+  showLessLabel = 'Show less',
+  testID,
+}: {
+  children: string;
+  lines: number;
+  color: string;
+  linkColor: string;
+  ring: string;
+  showMoreLabel?: string;
+  showLessLabel?: string;
+  testID?: string;
+}) {
+  const [expanded, setExpanded] = React.useState(false);
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  // Only offer the toggle when the text can plausibly overflow: ~ 60 characters a line.
+  const canOverflow = children.length > lines * 60;
+  const toggleStyle: WebCssStyle = { alignSelf: 'flex-start', borderRadius: 4, '--bloom-media-header-ring': ring };
+  return (
+    <View style={{ gap: 4 }} testID={testID}>
+      <Text variant="body-regular" numberOfLines={expanded ? undefined : lines} style={{ color }}>
+        {children}
+      </Text>
+      {canOverflow ? (
+        <Pressable
+          {...webData({ bloomMediaHeaderPress: '' })}
+          role="button"
+          accessibilityLabel={expanded ? showLessLabel : showMoreLabel}
+          aria-expanded={expanded}
+          accessibilityState={{ expanded }}
+          onPress={() => setExpanded((e) => !e)}
+          onHoverIn={onIn}
+          onHoverOut={onOut}
+          style={toggleStyle}
+        >
+          <Text
+            variant="body-semibold"
+            style={{ color: linkColor, textDecorationLine: hovered ? 'underline' : 'none' }}
+          >
+            {expanded ? showLessLabel : showMoreLabel}
+          </Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/media-header/shared.ts

@@ -0,0 +1,243 @@
+import { Platform } from 'react-native';
+
+import { mixColor, resolveButtonRamps } from '../button/shared';
+import { oklchToSrgb, srgbToOklch, srgbToRgbString } from '../theme/color-space';
+import { parseRgba } from '../theme/color-utils';
+import { quietTextOver } from '../styles/color-contrast';
+import { AA_TEXT } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+import type { TypeScaleVariant } from '../typography/scale';
+import { TYPE_SCALE } from '../typography/scale';
+import type { WebCssStyle } from '../styles/web-view-style';
+import {
+  AA_TEXT_CONTRAST,
+  contrastRatio,
+  readableOn,
+  relativeLuminance,
+} from '../styles/color-contrast';
+
+export const IS_WEB = Platform.OS === 'web';
+
+/** A header lays its cover beside the text from this container width. */
+export const MEDIA_HEADER_WIDE_MIN_WIDTH = 600;
+
+
+// ---------------------------------------------------------------------------
+//  Contrast
+// ---------------------------------------------------------------------------
+
+
+// ---------------------------------------------------------------------------
+//  The band — every colour a header paints
+// ---------------------------------------------------------------------------
+
+/**
+ * The artwork colour clamped into a band that always carries readable text.
+ *
+ *            lightness (OKLCH)   chroma
+ *   light    0.66 .. 0.84        ≤ 0.14
+ *   dark     0.30 .. 0.44        ≤ 0.14
+ *
+ * The hue is kept; a vivid or near-black artwork colour is pulled towards the
+ * page's own lightness, which is what "tinted towards the page background"
+ * means. `null` when the colour is absent or unparsable.
+ */
+export function tintArtworkColor(color: string | null | undefined, dark: boolean): string | null {
+  if (!color) return null;
+  const rgba = parseRgba(color);
+  if (!rgba) return null;
+  const { l, c, h } = srgbToOklch(rgba);
+  const [min, max] = dark ? [0.3, 0.44] : [0.66, 0.84];
+  let chroma = Math.min(c, 0.14);
+  const lightness = Math.min(max, Math.max(min, l));
+  // Reduce chroma until the colour fits sRGB, keeping hue and lightness.
+  for (let i = 0; i < 24; i++) {
+    const rgb = oklchToSrgb({ l: lightness, c: chroma, h });
+    const back = srgbToOklch(rgb);
+    if (Math.abs(back.l - lightness) < 0.01 && Math.abs(back.c - chroma) < 0.01) {
+      return srgbToRgbString(rgb);
+    }
+    chroma *= 0.9;
+  }
+  return srgbToRgbString(oklchToSrgb({ l: lightness, c: chroma, h }));
+}
+
+export interface MediaHeaderPaint {
+  /** `true` when no usable artwork colour was given and the band is neutral. */
+  fallback: boolean;
+  /** The band's top colour — the tinted artwork colour (or the neutral step). */
+  bandTop: string;
+  /** The band's bottom colour, where the actions area begins its fade to the page. */
+  bandBottom: string;
+  /** The page background the actions area fades into. */
+  background: string;
+  /** Text on the band — the theme's text or background colour, whichever reads better over BOTH ends. */
+  onBand: string;
+  /** Secondary text on the band, as far from `onBand` as AA allows. */
+  onBandMuted: string;
+  /** A progress rail drawn on the band. */
+  bandRail: string;
+  /** The sticky top bar's fill and its text. */
+  bar: string;
+  onBar: string;
+  text: string;
+  textMuted: string;
+  /** Hover wash behind glyph-only controls and rows. */
+  wash: string;
+  /** Hairline for outline pills and cards. */
+  border: string;
+  borderHover: string;
+  card: string;
+  accent: string;
+  onAccent: string;
+  ring: string;
+  /** Cover placeholder fill and glyph. */
+  placeholder: string;
+  placeholderGlyph: string;
+  /** Rail of a progress bar. */
+  rail: string;
+  /** The drop shadow under a cover. */
+  coverShadow: string;
+}
+
+/**
+ * Resolve a header's colours. Pure — walkable over every preset × mode × artwork
+ * colour without rendering.
+ */
+export function resolveMediaHeaderPaint(
+  theme: Theme,
+  artworkColor?: string | null,
+): MediaHeaderPaint {
+  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { colors } = theme;
+  const dark = theme.isDark;
+  const tinted = tintArtworkColor(artworkColor, dark);
+  const fallback = tinted === null;
+  const bandTop = tinted ?? (dark ? n[800] : n[200]);
+  const bandBottom = mixColor(colors.background, bandTop, 0.55);
+
+  const onBand = readableOn([bandTop, bandBottom], [colors.text, colors.background]);
+  // Walk the secondary text towards the band until one more step would fail AA.
+  let onBandMuted = onBand;
+  for (let t = 0.04; t <= 0.4; t += 0.04) {
+    const candidate = mixColor(onBand, bandTop, t);
+    const worst = Math.min(contrastRatio(candidate, bandTop), contrastRatio(candidate, bandBottom));
+    if (worst < AA_TEXT_CONTRAST + 0.25) break;
+    onBandMuted = candidate;
+  }
+
+  return {
+    fallback,
+    bandTop,
+    bandBottom,
+    background: colors.background,
+    onBand,
+    onBandMuted,
+    bandRail: mixColor(bandTop, onBand, 0.2),
+    bar: bandTop,
+    onBar: readableOn([bandTop], [colors.text, colors.background]),
+    text: colors.text,
+    // Floored on `card` — the harder of the two fills this label lands on. As
+    // `neutral-500` it measured 4.38:1 on the light card.
+    textMuted: quietTextOver([colors.background, dark ? n[900] : n[100]], colors.text, AA_TEXT),
+    wash: dark ? n[800] : n[100],
+    border: dark ? n[600] : n[300],
+    borderHover: colors.text,
+    card: dark ? n[900] : n[100],
+    accent: accent[500],
+    onAccent: colors.primaryForeground,
+    ring: accent[500],
+    placeholder: dark ? n[800] : n[200],
+    placeholderGlyph: dark ? n[500] : n[400],
+    rail: dark ? n[700] : n[200],
+    coverShadow: dark ? '0 8px 24px rgba(0, 0, 0, 0.5)' : '0 8px 24px rgba(0, 0, 0, 0.18)',
+  };
+}
+
+/** The liked-songs cover and band: a diagonal accent gradient. */
+export function resolveLikedGradient(theme: Theme): readonly [string, string] {
+  const { accent } = resolveButtonRamps(theme);
+  return [accent[700], accent[300]];
+}
+
+/** A linear gradient as a style: `background-image` on web, the native CSS-gradient style elsewhere. */
+export function gradientStyle(stops: readonly string[], angle = 180): WebCssStyle {
+  const image = `linear-gradient(${angle}deg, ${stops.join(', ')})`;
+  return IS_WEB ? { backgroundImage: image } : { experimental_backgroundImage: image };
+}
+
+// ---------------------------------------------------------------------------
+//  Title size
+// ---------------------------------------------------------------------------
+
+/**
+ * The steps a header title shrinks through, largest first, each with the
+ * number of lines it may take before the next step down is chosen.
+ */
+export const TITLE_STEPS: readonly { variant: TypeScaleVariant; lines: number }[] = [
+  { variant: 'large-title-bold', lines: 1 },
+  { variant: 'display-1-bold', lines: 1 },
+  { variant: 'display-2-bold', lines: 2 },
+  { variant: 'display-3-bold', lines: 2 },
+  { variant: 'display-4-bold', lines: 2 },
+  { variant: 'title-1-bold', lines: 3 },
+];
+
+/** Average advance of a bold sans glyph, as a fraction of the font size. */
+export const TITLE_GLYPH_RATIO = 0.56;
+
+/** Below this width the largest step is `display-4` — a phone never gets a 64px title. */
+export const TITLE_COMPACT_WIDTH = 480;
+
+/**
+ * The display step for a title in `width` px of line: the largest step whose
+ * estimated wrapped line count fits that step's allowance. The estimate is a
+ * glyph-ratio sum rather than a measurement, so it is stable on first render
+ * and identical on both platforms; the title still wraps if it is off.
+ */
+export function selectTitleVariant(title: string, width: number): TypeScaleVariant {
+  const chars = Array.from(title.trim()).length;
+  const start = width < TITLE_COMPACT_WIDTH ? TITLE_STEPS.findIndex((s) => s.variant === 'display-4-bold') : 0;
+  for (let i = start; i < TITLE_STEPS.length - 1; i++) {
+    const step = TITLE_STEPS[i]!;
+    const estimated = chars * TYPE_SCALE[step.variant].fontSize * TITLE_GLYPH_RATIO;
+    if (Math.ceil(estimated / Math.max(1, width)) <= step.lines) return step.variant;
+  }
+  return TITLE_STEPS[TITLE_STEPS.length - 1]!.variant;
+}
+
+// ---------------------------------------------------------------------------
+//  Web CSS — focus rings and link underline on hover
+// ---------------------------------------------------------------------------
+
+export const MEDIA_HEADER_STYLE_ID = 'bloom-media-header-web-css';
+
+export const MEDIA_HEADER_CSS = `
+[data-bloom-media-header-press] {
+  outline: none;
+  cursor: pointer;
+}
+[data-bloom-media-header-press][aria-disabled="true"] {
+  cursor: default;
+}
+[data-bloom-media-header-press]:focus-visible {
+  outline: 2px solid var(--bloom-media-header-ring, currentColor);
+  outline-offset: 2px;
+}
+[data-bloom-media-header-press="inset"]:focus-visible {
+  outline-offset: -2px;
+}
+[data-bloom-media-header-link]:hover [data-bloom-media-header-link-text] {
+  text-decoration-line: underline;
+}
+[data-bloom-media-header-fade] {
+  transition: opacity 200ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-bloom-media-header-fade] {
+    transition: none;
+  }
+}
+`;
+
+export { contrastRatio, relativeLuminance };