@oxy.so/bloom 4.0.0 → 4.1.0

package/src/place-list/PlaceList.tsx

@@ -0,0 +1,181 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+import { GlyphButton } from '../button';
+import { moveItem } from '../hooks/list-reorder';
+import { RiArrowDownLine } from '../icons/remix/RiArrowDownLine';
+import { RiArrowUpLine } from '../icons/remix/RiArrowUpLine';
+import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
+import { RiFileTextLine } from '../icons/remix/RiFileTextLine';
+import { PlaceCard } from '../place-card';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { PLACE_LIST_GEOMETRY } from './constants';
+import { DEFAULT_PLACE_LIST_LABELS, placeNameOf, resolvePlaceListPaint } from './shared';
+import type { PlaceListProps } from './types';
+
+/**
+ * The places inside a saved list: the place, the person's note about it, and
+ * the controls that move or remove it.
+ *
+ *   place     `PlaceCard` at `density="row"`, untouched — a saved place and a
+ *             search result are the same object, so this list draws no row of
+ *             its own and inherits the thumbnail, the rating, the open state
+ *             and the composed announcement with it
+ *   note      the person's own line, with a document glyph, announced as
+ *             "Note: get the sourdough before noon". It is a SIBLING of the
+ *             place's press target rather than part of its name: the place is
+ *             the place, and the note is what someone said about it
+ *   controls  move earlier, move later, remove — 44 boxes, right-aligned
+ *             under the row
+ *
+ * ## Reordering is buttons, and the buttons ARE the accessible path
+ *
+ * `moveItem` (`hooks/list-reorder`) is the same list maths the track list, the
+ * queue and the photo grid use, so "move" means one thing in this package.
+ * There is no pointer drag here: `SortablePhotoGrid`'s drag is grid geometry —
+ * a point resolved to a cell in a fixed row of columns — and a column of rows
+ * of different heights is a different problem, not a smaller one. Buttons are
+ * also what a keyboard and a screen reader get from a drag surface anyway, so
+ * the list is fully operable with the half that exists.
+ *
+ * Every move is announced politely, and every row is KEYED BY ITS ID — so on
+ * web the button that was just pressed keeps the focus and travels with its
+ * row, and a reader can press "move later" three times without hunting for it
+ * again.
+ *
+ * The first row's "move earlier" and the last row's "move later" are DISABLED
+ * rather than absent: a control that disappears at the end of its travel moves
+ * the two beside it under the pointer.
+ */
+function PlaceListComponent({
+  places,
+  onReorder,
+  onRemove,
+  disabled = false,
+  labels,
+  empty,
+  accessibilityLabel = 'Saved places',
+  style,
+  testID,
+}: PlaceListProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePlaceListPaint(theme, surface), [theme, surface]);
+  const words = useMemo(() => ({ ...DEFAULT_PLACE_LIST_LABELS, ...labels }), [labels]);
+  const [announcement, setAnnouncement] = useState('');
+
+  const { control, controlGlyph, gap } = PLACE_LIST_GEOMETRY;
+  const total = places.length;
+
+  const move = useCallback(
+    (from: number, to: number) => {
+      if (!onReorder || to < 0 || to >= total) return;
+      const entry = places[from];
+      if (!entry) return;
+      onReorder(moveItem(places, from, to));
+      setAnnouncement(words.moved(placeNameOf(entry), to + 1, total));
+    },
+    [onReorder, places, total, words],
+  );
+
+  if (total === 0) return <>{empty ?? null}</>;
+
+  return (
+    <View
+      role="list"
+      accessibilityLabel={accessibilityLabel}
+      style={[{ gap: gap * 2 }, style]}
+      testID={testID}
+    >
+      {places.map((entry, index) => {
+        const itemTestID = testID ? `${testID}-item-${index}` : undefined;
+        const name = placeNameOf(entry);
+        return (
+          <View key={entry.id} role="listitem" style={{ gap }} testID={itemTestID}>
+            <PlaceCard {...entry.place} density="row" />
+
+            {entry.note ? (
+              <View
+                accessible
+                accessibilityLabel={`${words.note}: ${entry.note}`}
+                style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 8 }}
+              >
+                <View
+                  aria-hidden
+                  accessibilityElementsHidden
+                  importantForAccessibility="no-hide-descendants"
+                  style={{ paddingTop: 2 }}
+                >
+                  <RiFileTextLine width={16} height={16} fill={paint.textTertiary} />
+                </View>
+                <Text
+                  variant="body-2-regular"
+                  style={{ flex: 1, minWidth: 0, color: paint.textSecondary }}
+                >
+                  {entry.note}
+                </Text>
+              </View>
+            ) : null}
+
+            {onReorder || onRemove ? (
+              <View
+                style={{ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', gap: 4 }}
+              >
+                {onReorder ? (
+                  <>
+                    <GlyphButton
+                      icon={RiArrowUpLine}
+                      size={control}
+                      glyphSize={controlGlyph}
+                      disabled={disabled || index === 0}
+                      onPress={() => move(index, index - 1)}
+                      accessibilityLabel={words.moveEarlier(index + 1)}
+                      testID={itemTestID ? `${itemTestID}-up` : undefined}
+                    />
+                    <GlyphButton
+                      icon={RiArrowDownLine}
+                      size={control}
+                      glyphSize={controlGlyph}
+                      disabled={disabled || index === total - 1}
+                      onPress={() => move(index, index + 1)}
+                      accessibilityLabel={words.moveLater(index + 1)}
+                      testID={itemTestID ? `${itemTestID}-down` : undefined}
+                    />
+                  </>
+                ) : null}
+                {onRemove ? (
+                  <GlyphButton
+                    icon={RiDeleteBinLine}
+                    size={control}
+                    glyphSize={controlGlyph}
+                    disabled={disabled}
+                    onPress={() => onRemove(entry.id)}
+                    accessibilityLabel={words.remove(name)}
+                    testID={itemTestID ? `${itemTestID}-remove` : undefined}
+                  />
+                ) : null}
+              </View>
+            ) : null}
+          </View>
+        );
+      })}
+      {/*
+        The move is a change of ORDER, which draws nothing new — the rows just
+        swap. A polite live region is the only way a screen reader hears that
+        the press did anything at all.
+      */}
+      <Text
+        accessibilityLiveRegion="polite"
+        style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }}
+        testID={testID ? `${testID}-status` : undefined}
+      >
+        {announcement}
+      </Text>
+    </View>
+  );
+}
+
+export const PlaceList = memo(PlaceListComponent);
+PlaceList.displayName = 'PlaceList';

package/src/place-list/PlaceListCard.tsx

@@ -0,0 +1,183 @@
+import React, { memo, useMemo } from 'react';
+import { Image, View, type ViewStyle } from 'react-native';
+
+import { AvatarGroup } from '../avatar-group';
+import { Badge } from '../badge';
+import { Card, CardBody } from '../card';
+import { useImageResolver } from '../image-resolver/context';
+import { resolvePhoto } from '../listing-card/shared';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { PLACE_LIST_GEOMETRY, PLACE_LIST_VISIBILITY_ICON, PLACE_LIST_VISIBILITY_LABELS } from './constants';
+import { composePlaceListName, placeListCountLabel, placeListSharedWithLabel, resolvePlaceListPaint } from './shared';
+import type { PlaceListCardProps } from './types';
+
+/**
+ * A saved list of places — "Want to go", "Favourites", "Coffee, ranked".
+ *
+ *   cover   a 112 strip of the first four places' photos, 2px seams, radius
+ *           12: the first tile takes two shares of the row and the rest one
+ *           each, so a list with photos reads as a PLACE and not as a folder.
+ *           With no photos it is one tinted tile holding `empty`
+ *   body    the list's glyph and its name (`body-semibold`), then one quiet
+ *           meta line — the count, then who it is shared with
+ *   people  `AvatarGroup` on the right, 24 each, at most three
+ *   badge   the visibility, with its own glyph: private, shared, public
+ *
+ * THE COUNT AND THE SHARING ARE ONE LINE, not two rows of chrome. A saved list
+ * is scanned in a grid of them, and the only questions asked of a card in that
+ * grid are "which list is this" and "how much is in it".
+ *
+ * The card is ONE press target carrying four facts, so it announces them as
+ * one sentence (`composePlaceListName`) rather than leaving the reader to
+ * assemble "Want to go 12 places Shared Ana Marc" out of four runs.
+ *
+ * `AvatarGroup` here takes no `onPressItem`: a button inside the card's own
+ * press target is the nested control this library refuses everywhere, and a
+ * collaborator's profile belongs on the list's own screen.
+ */
+function PlaceListCardComponent(props: PlaceListCardProps) {
+  const {
+    name,
+    count,
+    countLabel = placeListCountLabel,
+    photos,
+    photoVariant,
+    empty,
+    icon: Icon,
+    color,
+    visibility = 'private',
+    visibilityLabel,
+    collaborators,
+    sharedWithLabel = placeListSharedWithLabel,
+    onPress,
+    accessibilityLabel,
+    style,
+    testID,
+  } = props;
+
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePlaceListPaint(theme, surface), [theme, surface]);
+  const resolver = useImageResolver();
+
+  const { cover, coverRadius, seam, coverPhotos, gap } = PLACE_LIST_GEOMETRY;
+  const uris = (photos ?? [])
+    .slice(0, coverPhotos)
+    .map((photo) => resolvePhoto(photo, resolver, photoVariant));
+
+  const tile = (uri: string | undefined, key: string, flex: number): React.ReactNode => {
+    const box: ViewStyle = { flex, backgroundColor: paint.tile, overflow: 'hidden' };
+    return (
+      <View key={key} style={box}>
+        {uri ? (
+          <Image
+            source={{ uri }}
+            resizeMode="cover"
+            accessibilityIgnoresInvertColors
+            style={{ width: '100%', height: '100%' }}
+          />
+        ) : null}
+      </View>
+    );
+  };
+
+  const meta: string[] = [];
+  if (count != null) meta.push(countLabel(count));
+  if (collaborators && collaborators.length > 0) meta.push(sharedWithLabel(collaborators.length));
+
+  const VisibilityIcon = PLACE_LIST_VISIBILITY_ICON[visibility];
+
+  return (
+    <Card
+      radius="radius-16"
+      onPress={onPress}
+      accessibilityLabel={accessibilityLabel ?? composePlaceListName(props)}
+      style={style}
+      testID={testID}
+    >
+      <CardBody style={{ gap }}>
+        <View
+          style={{
+            height: cover,
+            borderRadius: coverRadius,
+            overflow: 'hidden',
+            flexDirection: 'row',
+            gap: seam,
+            backgroundColor: uris.length === 0 ? color ?? paint.tile : undefined,
+            alignItems: uris.length === 0 ? 'center' : undefined,
+            justifyContent: uris.length === 0 ? 'center' : undefined,
+          }}
+          testID={testID ? `${testID}-cover` : undefined}
+        >
+          {uris.length === 0
+            ? empty ?? null
+            : uris.map((uri, index) => tile(uri, `tile-${index}`, index === 0 ? 2 : 1))}
+        </View>
+
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap }}>
+          <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              {Icon ? (
+                <View
+                  aria-hidden
+                  accessibilityElementsHidden
+                  importantForAccessibility="no-hide-descendants"
+                  style={{ flexShrink: 0 }}
+                >
+                  <Icon width={16} height={16} fill={color ?? paint.textSecondary} />
+                </View>
+              ) : null}
+              <Text
+                variant="body-semibold"
+                numberOfLines={1}
+                style={{ flexShrink: 1, minWidth: 0, color: paint.text }}
+                testID={testID ? `${testID}-name` : undefined}
+              >
+                {name}
+              </Text>
+            </View>
+            {meta.length > 0 ? (
+              <Text
+                variant="body-2-regular"
+                numberOfLines={1}
+                style={{ color: paint.textSecondary }}
+                testID={testID ? `${testID}-meta` : undefined}
+              >
+                {meta.join(' · ')}
+              </Text>
+            ) : null}
+          </View>
+
+          {collaborators && collaborators.length > 0 ? (
+            <View
+              aria-hidden
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              testID={testID ? `${testID}-people` : undefined}
+            >
+              {/*
+                `showInitials`: a collaborator usually has no photo in a saved
+                list, and three identical grey circles say less than three
+                letters do.
+              */}
+              <AvatarGroup items={[...collaborators]} size={24} max={3} showInitials />
+            </View>
+          ) : null}
+
+          <Badge
+            content={visibilityLabel ?? PLACE_LIST_VISIBILITY_LABELS[visibility]}
+            icon={VisibilityIcon}
+            variant="subtle"
+            color="default"
+            size="label-small"
+          />
+        </View>
+      </CardBody>
+    </Card>
+  );
+}
+
+export const PlaceListCard = memo(PlaceListCardComponent);
+PlaceListCard.displayName = 'PlaceListCard';

package/src/place-list/constants.ts

@@ -0,0 +1,54 @@
+import { RiEarthLine } from '../icons/remix/RiEarthLine';
+import { RiGroupLine } from '../icons/remix/RiGroupLine';
+import { RiLockLine } from '../icons/remix/RiLockLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { PlaceListVisibility } from './types';
+
+/** The English default visibility words. */
+export const PLACE_LIST_VISIBILITY_LABELS: Readonly<Record<PlaceListVisibility, string>> = {
+  private: 'Private',
+  shared: 'Shared',
+  public: 'Public',
+};
+
+/** The glyph each visibility draws on its badge. */
+export const PLACE_LIST_VISIBILITY_ICON: Readonly<Record<PlaceListVisibility, BloomIconComponent>> = {
+  private: RiLockLine,
+  shared: RiGroupLine,
+  public: RiEarthLine,
+};
+
+export interface PlaceListGeometry {
+  /** The cover strip's height. */
+  cover: number;
+  /** The strip's corner. */
+  coverRadius: number;
+  /** Between the strip's tiles. */
+  seam: number;
+  /** How many photos the strip shows. */
+  coverPhotos: number;
+  /** Between the card's blocks, and between two places in a list. */
+  gap: number;
+  /** A move or remove control's box. */
+  control: number;
+  /** The glyph inside that box. */
+  controlGlyph: number;
+}
+
+/**
+ * The strip is 112 tall because that is `listing-card`'s compact thumbnail
+ * (`COMPACT_PHOTO_SIZE`), which is the height of the place rows the list is
+ * made of — so a list's cover and the first place under it agree.
+ *
+ * The controls are 44 because that is the smallest comfortable touch target,
+ * and a saved list is edited with a thumb.
+ */
+export const PLACE_LIST_GEOMETRY: PlaceListGeometry = {
+  cover: 112,
+  coverRadius: 12,
+  seam: 2,
+  coverPhotos: 4,
+  gap: 12,
+  control: 44,
+  controlGlyph: 20,
+};

package/src/place-list/index.ts

@@ -0,0 +1,23 @@
+export { PlaceList } from './PlaceList';
+export { PlaceListCard } from './PlaceListCard';
+export {
+  PLACE_LIST_GEOMETRY,
+  PLACE_LIST_VISIBILITY_ICON,
+  PLACE_LIST_VISIBILITY_LABELS,
+} from './constants';
+export type { PlaceListGeometry } from './constants';
+export {
+  DEFAULT_PLACE_LIST_LABELS,
+  composePlaceListName,
+  placeListCountLabel,
+  placeListSharedWithLabel,
+  resolvePlaceListPaint,
+} from './shared';
+export type { PlaceListPaint } from './shared';
+export type {
+  PlaceListCardProps,
+  PlaceListLabels,
+  PlaceListPlace,
+  PlaceListProps,
+  PlaceListVisibility,
+} from './types';

package/src/place-list/shared.ts

@@ -0,0 +1,77 @@
+/**
+ * What `place-list` paints, and the pure text it assembles.
+ *
+ * The colours are read off the surface the card or the list was dropped on
+ * (`styles/surface-levels.ts`) — a saved list is shown on a page, in a sheet
+ * and inside a panel, and nothing here picks a ramp stop.
+ */
+import {
+  hairlineOn,
+  surfaceFillOn,
+  surfaceTextOn,
+  type SurfaceTextPaint,
+} from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import { PLACE_LIST_VISIBILITY_LABELS } from './constants';
+import type { PlaceListCardProps, PlaceListLabels, PlaceListPlace } from './types';
+
+export interface PlaceListPaint extends SurfaceTextPaint {
+  /** Behind a cover photo that has not loaded, and the empty strip. */
+  tile: string;
+  /** A rule between two entries. */
+  hairline: string;
+  /** The keyboard focus ring. */
+  ring: string;
+}
+
+export function resolvePlaceListPaint(theme: Theme, surface: string): PlaceListPaint {
+  return {
+    ...surfaceTextOn(theme, surface),
+    tile: surfaceFillOn(theme, surface),
+    hairline: hairlineOn(theme, surface),
+    ring: resolveAccentColors(theme.colors, 'primary', 'solid').background,
+  };
+}
+
+/** `"12 places"`, and `"1 place"` for the one that would otherwise read wrong. */
+export function placeListCountLabel(count: number): string {
+  return count === 1 ? '1 place' : `${count} places`;
+}
+
+/** `"Shared with 3"`. */
+export function placeListSharedWithLabel(count: number): string {
+  return `Shared with ${count}`;
+}
+
+/**
+ * The card in one utterance, in reading order: the name, how much is in it,
+ * who it is shared with, and whether anyone else can see it.
+ *
+ * Composed rather than left to ARIA's contents algorithm for the same reason
+ * `PlaceCard` composes its row: the card is ONE press target, and without a
+ * name it is announced as "Want to go 12 places Shared with 3 Shared" in one
+ * run with no commas.
+ */
+export function composePlaceListName(props: PlaceListCardProps): string {
+  const parts: string[] = [props.name];
+  if (props.count != null) parts.push((props.countLabel ?? placeListCountLabel)(props.count));
+  const people = props.collaborators?.length ?? 0;
+  if (people > 0) parts.push((props.sharedWithLabel ?? placeListSharedWithLabel)(people));
+  parts.push(props.visibilityLabel ?? PLACE_LIST_VISIBILITY_LABELS[props.visibility ?? 'private']);
+  return parts.join(', ');
+}
+
+/** Every word `PlaceList` speaks, before the caller overrides any of them. */
+export const DEFAULT_PLACE_LIST_LABELS: PlaceListLabels = {
+  moveEarlier: (position) => `Move to position ${position - 1}`,
+  moveLater: (position) => `Move to position ${position + 1}`,
+  remove: (name) => `Remove ${name} from the list`,
+  moved: (name, position, total) => `${name} moved to position ${position} of ${total}`,
+  note: 'Note',
+};
+
+/** A place's name, for the controls that talk about it. */
+export function placeNameOf(entry: PlaceListPlace): string {
+  return entry.place.name;
+}

package/src/place-list/types.ts

@@ -0,0 +1,107 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AvatarGroupItem } from '../avatar-group/types';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { PlaceCardProps } from '../place-card/types';
+
+/**
+ * Who can see a saved list. Three members because the middle one is the
+ * interesting case: a list that is not private is usually shared with NAMED
+ * people rather than published, and an app that can only say public/private
+ * has to lie about the common one.
+ */
+export type PlaceListVisibility = 'private' | 'shared' | 'public';
+
+export interface PlaceListCardProps {
+  /** The list's name ("Want to go", "Coffee, ranked"). */
+  name: string;
+  /** How many places are in it. Drawn through `countLabel`. */
+  count?: number;
+  /** Default `(n) => n === 1 ? '1 place' : \`${n} places\``. */
+  countLabel?: (count: number) => string;
+  /**
+   * The cover strip: the first four places' photos, each an absolute URL or an
+   * id the app's `ImageResolver` turns into one. The first one is wide.
+   */
+  photos?: readonly string[];
+  /** The `ImageResolver` rendition for a photo id. Ignored for URLs. */
+  photoVariant?: string;
+  /** What to draw on the strip when the list has no photos yet. */
+  empty?: ReactNode;
+  /**
+   * The list's own glyph, beside the name. DECORATIVE — a glyph put in the
+   * `name` string is read out as its character and cannot be coloured.
+   */
+  icon?: BloomIconComponent;
+  /**
+   * The person's colour for this list. It paints the glyph and tints the empty
+   * strip. It is the caller's colour and not a token, because a list's colour
+   * is a choice Bloom has no ramp for.
+   */
+  color?: string;
+  /** Default `private`. */
+  visibility?: PlaceListVisibility;
+  /** Replaces the English visibility word. */
+  visibilityLabel?: string;
+  /** The people it is shared with, as `AvatarGroup` items. */
+  collaborators?: readonly AvatarGroupItem[];
+  /** Default `(n) => \`Shared with ${n}\``. Announced, and drawn when there is room. */
+  sharedWithLabel?: (count: number) => string;
+  /** Opens the list. */
+  onPress?: () => void;
+  /** Replaces the composed name ("Want to go, 12 places, shared with 3"). */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-cover`, `-name`, `-meta`, `-people`. */
+  testID?: string;
+}
+
+/** One place inside a saved list: the place, plus what the person said about it. */
+export interface PlaceListPlace {
+  /** Identifies the entry. Reordering, removing and keying all use it. */
+  id: string;
+  /**
+   * The place itself, drawn by `PlaceCard` at `density="row"` — the same row a
+   * search result is, because a saved place and a found place are the same
+   * object. `density`, `style` and `testID` are the list's to set.
+   */
+  place: Omit<PlaceCardProps, 'density' | 'style' | 'testID'>;
+  /** The person's own line about it ("Get the sourdough before noon"). */
+  note?: string;
+}
+
+/** Every word `PlaceList` speaks that is not in the data. */
+export interface PlaceListLabels {
+  /** Default `` (position) => `Move to position ${position - 1}` ``. */
+  moveEarlier: (position: number) => string;
+  /** Default `` (position) => `Move to position ${position + 1}` ``. */
+  moveLater: (position: number) => string;
+  /** Default `` (name) => `Remove ${name} from the list` ``. */
+  remove: (name: string) => string;
+  /** Announced politely after a move. Default `` (name, position, total) => `${name} moved to position ${position} of ${total}` ``. */
+  moved: (name: string, position: number, total: number) => string;
+  /** Names a place's note for a screen reader. Default `"Note"`. */
+  note: string;
+}
+
+export interface PlaceListProps {
+  places: readonly PlaceListPlace[];
+  /**
+   * Called with the WHOLE list in its new order. Setting it draws the move
+   * controls; without it the list is not reorderable.
+   */
+  onReorder?: (places: PlaceListPlace[]) => void;
+  /** Called with the entry's id. Setting it draws the remove control. */
+  onRemove?: (id: string) => void;
+  /** Stops reordering and removing, without hiding the controls. */
+  disabled?: boolean;
+  labels?: Partial<PlaceListLabels>;
+  /** Drawn instead of the list when there are no places. */
+  empty?: ReactNode;
+  /** Names the list. Default `"Saved places"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-item-<n>`, `-item-<n>-up`, `-down`, `-remove`, `-status`. */
+  testID?: string;
+}

package/src/progressive-blur/ProgressiveBlur.tsx

@@ -1,3 +1,4 @@
+import { useSurfaceFill } from '../styles/surface-levels';
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
  * (MIT © 2026 David Mokos).
@@ -31,7 +32,8 @@ export function ProgressiveBlur({
   direction = 'top',
   ...rest
 }: ProgressiveBlurProps) {
-  const { colors, isDark } = useTheme();
+  const { isDark } = useTheme();
+  const surfaceFill = useSurfaceFill();
   const anchor = direction === 'top' ? styles.anchorTop : styles.anchorBottom;
 
   return (
@@ -47,7 +49,7 @@ export function ProgressiveBlur({
       <View
         style={[
           StyleSheet.absoluteFill,
-          { experimental_backgroundImage: buildTailGradient(colors.background, direction) },
+          { experimental_backgroundImage: buildTailGradient(surfaceFill, direction) },
         ]}
       />
     </View>

package/src/progressive-blur/ProgressiveBlur.web.tsx

@@ -1,3 +1,4 @@
+import { useSurfaceFill } from '../styles/surface-levels';
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
  * (MIT © 2026 David Mokos).
@@ -5,7 +6,6 @@
 import { View } from 'react-native';
 
 import type { WebCssStyle } from '../styles/web-view-style';
-import { useTheme } from '../theme/use-theme';
 import {
   buildMaskGradient,
   buildTailGradient,
@@ -42,7 +42,7 @@ export function ProgressiveBlur({
   direction = 'top',
   ...rest
 }: ProgressiveBlurProps) {
-  const { colors } = useTheme();
+  const surfaceFill = useSurfaceFill();
 
   const filter = `blur(${intensity * WEB_BLUR_PER_INTENSITY}px)`;
   const mask = buildMaskGradient(direction);
@@ -55,7 +55,7 @@ export function ProgressiveBlur({
     WebkitBackdropFilter: filter,
     maskImage: mask,
     WebkitMaskImage: mask,
-    backgroundImage: buildTailGradient(colors.background, direction),
+    backgroundImage: buildTailGradient(surfaceFill, direction),
   };
 
   return <View {...rest} style={[webStyle, style]} />;