@oxy.so/bloom 2.8.0 → 2.10.0

package/lib/module/media-player/device-icons.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import { RiCarLine } from "../icons/remix/RiCarLine.js";
+import { RiComputerLine } from "../icons/remix/RiComputerLine.js";
+import { RiHeadphoneLine } from "../icons/remix/RiHeadphoneLine.js";
+import { RiSmartphoneLine } from "../icons/remix/RiSmartphoneLine.js";
+import { RiSpeaker3Line } from "../icons/remix/RiSpeaker3Line.js";
+import { RiSpeakerLine } from "../icons/remix/RiSpeakerLine.js";
+import { RiTabletLine } from "../icons/remix/RiTabletLine.js";
+import { RiTvLine } from "../icons/remix/RiTvLine.js";
+export const DEVICE_GLYPHS = {
+  computer: RiComputerLine,
+  phone: RiSmartphoneLine,
+  tablet: RiTabletLine,
+  speaker: RiSpeakerLine,
+  tv: RiTvLine,
+  car: RiCarLine,
+  headphones: RiHeadphoneLine,
+  group: RiSpeaker3Line
+};
+//# sourceMappingURL=device-icons.js.map

package/lib/module/media-player/device-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RiCarLine","RiComputerLine","RiHeadphoneLine","RiSmartphoneLine","RiSpeaker3Line","RiSpeakerLine","RiTabletLine","RiTvLine","DEVICE_GLYPHS","computer","phone","tablet","speaker","tv","car","headphones","group"],"sourceRoot":"../../../src","sources":["media-player/device-icons.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,6BAA0B;AACpD,SAASC,cAAc,QAAQ,kCAA+B;AAC9D,SAASC,eAAe,QAAQ,mCAAgC;AAChE,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,cAAc,QAAQ,kCAA+B;AAC9D,SAASC,aAAa,QAAQ,iCAA8B;AAC5D,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,QAAQ,QAAQ,4BAAyB;AAIlD,OAAO,MAAMC,aAAsD,GAAG;EACpEC,QAAQ,EAAER,cAAc;EACxBS,KAAK,EAAEP,gBAAgB;EACvBQ,MAAM,EAAEL,YAAY;EACpBM,OAAO,EAAEP,aAAa;EACtBQ,EAAE,EAAEN,QAAQ;EACZO,GAAG,EAAEd,SAAS;EACde,UAAU,EAAEb,eAAe;EAC3Bc,KAAK,EAAEZ;AACT,CAAC","ignoreList":[]}

package/lib/module/media-player/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+export { TransportControls } from "./TransportControls.js";
+export { NowPlayingBar } from "./NowPlayingBar.js";
+export { MiniPlayer } from "./MiniPlayer.js";
+export { FullScreenPlayer } from "./FullScreenPlayer.js";
+export { PlaybackSpeedMenu } from "./PlaybackSpeedMenu.js";
+export { SleepTimerMenu } from "./SleepTimerMenu.js";
+export { DevicePicker } from "./DevicePicker.js";
+export { ConnectBanner } from "./ConnectBanner.js";
+export { nextRepeatMode, resolveArtworkTint, PLAYBACK_RATES, SLEEP_TIMER_MINUTES } from "./shared.js";
+//# sourceMappingURL=index.js.map

package/lib/module/media-player/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TransportControls","NowPlayingBar","MiniPlayer","FullScreenPlayer","PlaybackSpeedMenu","SleepTimerMenu","DevicePicker","ConnectBanner","nextRepeatMode","resolveArtworkTint","PLAYBACK_RATES","SLEEP_TIMER_MINUTES"],"sourceRoot":"../../../src","sources":["media-player/index.ts"],"mappings":";;AAAA,SAASA,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,UAAU,QAAQ,iBAAc;AACzC,SAASC,gBAAgB,QAAQ,uBAAoB;AACrD,SAASC,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,cAAc,QAAQ,qBAAkB;AACjD,SAASC,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SACEC,cAAc,EACdC,kBAAkB,EAClBC,cAAc,EACdC,mBAAmB,QACd,aAAU","ignoreList":[]}

package/lib/module/media-player/shared.js

@@ -0,0 +1,152 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { neutralRamp } from "../button/shared.js";
+import { parseRgba } from "../theme/color-utils.js";
+import { contrastRatio, relativeLuminance } from "../styles/color-contrast.js";
+export const IS_WEB = Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+//  Repeat, speed, sleep
+// ---------------------------------------------------------------------------
+
+const REPEAT_CYCLE = {
+  off: 'all',
+  all: 'one',
+  one: 'off'
+};
+
+/** The next mode of the repeat cycle: `off` → `all` → `one` → `off`. */
+export function nextRepeatMode(mode) {
+  return REPEAT_CYCLE[mode] ?? 'all';
+}
+export const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
+export const SLEEP_TIMER_MINUTES = [5, 10, 15, 30, 45, 60];
+
+/** `1` → `"1×"`, `1.25` → `"1.25×"`, `0.5` → `"0.5×"`. */
+export function formatPlaybackRate(rate) {
+  return `${Number(rate.toFixed(2))}×`;
+}
+
+/** Menu values are strings; a rate or a timer value round-trips through one. */
+export function sleepTimerKey(value) {
+  return typeof value === 'number' ? `min-${value}` : value;
+}
+export function parseSleepTimerKey(key) {
+  if (key === 'off' || key === 'end') return key;
+  const minutes = Number(key.replace(/^min-/, ''));
+  return Number.isFinite(minutes) && minutes > 0 ? minutes : 'off';
+}
+export function artistNames(artists) {
+  return typeof artists === 'string' ? artists : artists.map(a => a.name).join(', ');
+}
+export function isUrl(value) {
+  return /^(https?:|data:|blob:|file:)/.test(value);
+}
+
+// ---------------------------------------------------------------------------
+//  Sizes
+// ---------------------------------------------------------------------------
+
+export const TRANSPORT_GEOMETRY = {
+  compact: {
+    play: 'small',
+    glyph: 16,
+    box: 32,
+    skipGlyph: 20,
+    gap: 8
+  },
+  regular: {
+    play: 'medium',
+    glyph: 20,
+    box: 32,
+    skipGlyph: 24,
+    gap: 16
+  },
+  large: {
+    play: 'large',
+    glyph: 24,
+    box: 40,
+    skipGlyph: 32,
+    gap: 24
+  }
+};
+
+// ---------------------------------------------------------------------------
+//  Contrast — artwork colours arrive from the backend and can be anything.
+// ---------------------------------------------------------------------------
+
+function hex(v) {
+  return Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0');
+}
+
+/** `color` darkened toward black by `amount` (0..1), as `#rrggbb`. */
+export function darken(color, amount) {
+  const c = parseRgba(color);
+  if (!c) return null;
+  const k = 1 - amount;
+  return `#${hex(c.r * k)}${hex(c.g * k)}${hex(c.b * k)}`;
+}
+
+/** The two foregrounds the immersive surfaces draw on a tint: body text and secondary text. */
+export const IMMERSIVE_TEXT_TARGET = 4.5;
+/**
+ * The artwork colour, darkened in 5% steps until BOTH `text` and `textMuted`
+ * clear 4.5:1 on it. A missing or unparseable colour gives `background: null`
+ * — the caller falls back to its neutral surface. Black clears any light
+ * foreground, so the loop always ends with a colour.
+ */
+export function resolveArtworkTint(artworkColor, text, textMuted) {
+  if (!artworkColor || !parseRgba(artworkColor)) return {
+    background: null,
+    darkened: 0
+  };
+  for (let step = 0; step <= 20; step++) {
+    const amount = step / 20;
+    const bg = darken(artworkColor, amount);
+    if (contrastRatio(bg, text) >= IMMERSIVE_TEXT_TARGET && contrastRatio(bg, textMuted) >= IMMERSIVE_TEXT_TARGET) {
+      return {
+        background: bg,
+        darkened: amount
+      };
+    }
+  }
+  return {
+    background: '#000000',
+    darkened: 1
+  };
+}
+
+/** The dark surface the full-screen gradient ends on: neutral-950 tinted by the theme text. */
+export function immersiveBase(themeText) {
+  return neutralRamp(themeText)[950];
+}
+
+/** A top-to-bottom gradient: `background-image` on web, the native CSS-gradient style elsewhere. */
+export function verticalGradient(stops, positions) {
+  const list = stops.map((c, i) => positions?.[i] !== undefined ? `${c} ${positions[i]}%` : c).join(', ');
+  const image = `linear-gradient(180deg, ${list})`;
+  return IS_WEB ? {
+    backgroundImage: image
+  } : {
+    experimental_backgroundImage: image
+  };
+}
+
+// ---------------------------------------------------------------------------
+//  Web CSS — a link's hover / focus underline has no inline-style spelling.
+// ---------------------------------------------------------------------------
+
+export const MEDIA_PLAYER_STYLE_ID = 'bloom-media-player-web-css';
+export const MEDIA_PLAYER_CSS = `
+[data-bloom-player-link] {
+  cursor: pointer;
+  outline: none;
+}
+[data-bloom-player-link]:hover,
+[data-bloom-player-link]:focus-visible {
+  text-decoration-line: underline;
+}
+`;
+export { contrastRatio, relativeLuminance };
+//# sourceMappingURL=shared.js.map

package/lib/module/media-player/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","neutralRamp","parseRgba","contrastRatio","relativeLuminance","IS_WEB","OS","REPEAT_CYCLE","off","all","one","nextRepeatMode","mode","PLAYBACK_RATES","SLEEP_TIMER_MINUTES","formatPlaybackRate","rate","Number","toFixed","sleepTimerKey","value","parseSleepTimerKey","key","minutes","replace","isFinite","artistNames","artists","map","a","name","join","isUrl","test","TRANSPORT_GEOMETRY","compact","play","glyph","box","skipGlyph","gap","regular","large","hex","v","Math","round","max","min","toString","padStart","darken","color","amount","c","k","r","g","b","IMMERSIVE_TEXT_TARGET","resolveArtworkTint","artworkColor","text","textMuted","background","darkened","step","bg","immersiveBase","themeText","verticalGradient","stops","positions","list","i","undefined","image","backgroundImage","experimental_backgroundImage","MEDIA_PLAYER_STYLE_ID","MEDIA_PLAYER_CSS"],"sourceRoot":"../../../src","sources":["media-player/shared.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/media-player/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/media-player/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["media-player/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/media-shelf/FilterChips.js

@@ -0,0 +1,70 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { ScrollView } from 'react-native';
+import { Chip } from "../chip/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The single-select pill row above a feed: "All", "Music", "Podcasts"…
+ *
+ *   chip        `Chip` size `large` (28 tall, full pill)
+ *   rest        subtle neutral fill, text colour
+ *   selected    solid accent fill, on-accent label
+ *   gap         8; the row scrolls horizontally when it does not fit
+ *
+ * Each chip is a toggle button (`aria-pressed`, `accessibilityState.selected`
+ * on native — `Chip`'s own contract) in a `role="group"` named by
+ * `accessibilityLabel`.
+ */
+function FilterChipsComponent({
+  options,
+  value,
+  onValueChange,
+  allowDeselect = false,
+  accessibilityLabel = 'Filters',
+  contentInset = 0,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(ScrollView, {
+    horizontal: true,
+    role: "group",
+    accessibilityLabel: accessibilityLabel,
+    showsHorizontalScrollIndicator: false,
+    style: [{
+      flexGrow: 0
+    }, style],
+    contentContainerStyle: {
+      gap: 8,
+      alignItems: 'center',
+      paddingLeft: contentInset,
+      paddingRight: contentInset
+    },
+    testID: testID,
+    children: options.map(option => {
+      const selected = option.value === value;
+      return /*#__PURE__*/_jsx(Chip, {
+        size: "large",
+        variant: selected ? 'solid' : 'subtle',
+        selected: selected,
+        onPress: () => {
+          if (selected) {
+            if (allowDeselect) onValueChange(undefined);
+            return;
+          }
+          onValueChange(option.value);
+        },
+        accessibilityLabel: option.label,
+        style: {
+          paddingLeft: 12,
+          paddingRight: 12
+        },
+        testID: testID ? `${testID}-${option.value}` : undefined,
+        children: option.label
+      }, option.value);
+    })
+  });
+}
+export const FilterChips = /*#__PURE__*/memo(FilterChipsComponent);
+FilterChips.displayName = 'FilterChips';
+//# sourceMappingURL=FilterChips.js.map

package/lib/module/media-shelf/FilterChips.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","ScrollView","Chip","jsx","_jsx","FilterChipsComponent","options","value","onValueChange","allowDeselect","accessibilityLabel","contentInset","style","testID","horizontal","role","showsHorizontalScrollIndicator","flexGrow","contentContainerStyle","gap","alignItems","paddingLeft","paddingRight","children","map","option","selected","size","variant","onPress","undefined","label","FilterChips","displayName"],"sourceRoot":"../../../src","sources":["media-shelf/FilterChips.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,IAAI,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,oBAAoBA,CAAC;EAC5BC,OAAO;EACPC,KAAK;EACLC,aAAa;EACbC,aAAa,GAAG,KAAK;EACrBC,kBAAkB,GAAG,SAAS;EAC9BC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACgB,CAAC,EAAE;EACnB,oBACET,IAAA,CAACH,UAAU;IACTa,UAAU;IACVC,IAAI,EAAC,OAAO;IACZL,kBAAkB,EAAEA,kBAAmB;IACvCM,8BAA8B,EAAE,KAAM;IACtCJ,KAAK,EAAE,CAAC;MAAEK,QAAQ,EAAE;IAAE,CAAC,EAAEL,KAAK,CAAE;IAChCM,qBAAqB,EAAE;MACrBC,GAAG,EAAE,CAAC;MACNC,UAAU,EAAE,QAAQ;MACpBC,WAAW,EAAEV,YAAY;MACzBW,YAAY,EAAEX;IAChB,CAAE;IACFE,MAAM,EAAEA,MAAO;IAAAU,QAAA,EAEdjB,OAAO,CAACkB,GAAG,CAAEC,MAAM,IAAK;MACvB,MAAMC,QAAQ,GAAGD,MAAM,CAAClB,KAAK,KAAKA,KAAK;MACvC,oBACEH,IAAA,CAACF,IAAI;QAEHyB,IAAI,EAAC,OAAO;QACZC,OAAO,EAAEF,QAAQ,GAAG,OAAO,GAAG,QAAS;QACvCA,QAAQ,EAAEA,QAAS;QACnBG,OAAO,EAAEA,CAAA,KAAM;UACb,IAAIH,QAAQ,EAAE;YACZ,IAAIjB,aAAa,EAAED,aAAa,CAACsB,SAAS,CAAC;YAC3C;UACF;UACAtB,aAAa,CAACiB,MAAM,CAAClB,KAAK,CAAC;QAC7B,CAAE;QACFG,kBAAkB,EAAEe,MAAM,CAACM,KAAM;QACjCnB,KAAK,EAAE;UAAES,WAAW,EAAE,EAAE;UAAEC,YAAY,EAAE;QAAG,CAAE;QAC7CT,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,IAAIY,MAAM,CAAClB,KAAK,EAAE,GAAGuB,SAAU;QAAAP,QAAA,EAExDE,MAAM,CAACM;MAAK,GAfRN,MAAM,CAAClB,KAgBR,CAAC;IAEX,CAAC;EAAC,CACQ,CAAC;AAEjB;AAEA,OAAO,MAAMyB,WAAW,gBAAGhC,IAAI,CAACK,oBAAoB,CAAC;AACrD2B,WAAW,CAACC,WAAW,GAAG,aAAa","ignoreList":[]}

package/lib/module/media-shelf/Shelf.js

@@ -0,0 +1,379 @@
+"use strict";
+
+import React, { Children, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
+import { Avatar } from "../avatar/index.js";
+import { Button } from '../button';
+import { resolveButtonRamps } from "../button/shared.js";
+import { useInteractionState } from "../hooks/use-interaction-state.js";
+import { RiArrowLeftSLine } from "../icons/remix/RiArrowLeftSLine.js";
+import { RiArrowRightSLine } from "../icons/remix/RiArrowRightSLine.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { IS_WEB, MEDIA_SHELF_CSS, MEDIA_SHELF_STYLE_ID, SHELF_GAP, shelfGridColumns, shelfOverflow, shelfPageTarget, webData } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A section of a home or search page: a header over a run of items.
+ *
+ *   header      [avatar 24 · eyebrow caption-1-regular]      Show all  (‹)(›)
+ *               title title-2-bold
+ *               subtitle body-2-regular, text-secondary
+ *   gap         12 between header and items
+ *   row         one horizontal line, `gap` 16 (web) / 12 (native)
+ *   grid        `rows` rows of as many ≥ `minItemWidth` columns as fit
+ *
+ * Web row: a hidden scrollbar, items snap to their start, and round secondary
+ * prev/next buttons sit in the header, each disabled at its end and both
+ * hidden while nothing overflows. Native row: a plain horizontal `ScrollView`
+ * (snapping per item when `itemWidth` is given).
+ *
+ * "Show all" is `text-secondary` and turns `text` on hover — colour only. The
+ * title is a heading (`aria-level`, default 2); with `onTitlePress` it is also
+ * a link to the same page and underlines on hover.
+ *
+ * Semantics: `role="group"` named by `title`; each item is a plain child —
+ * the tiles bring their own names.
+ */
+function ShelfComponent({
+  title,
+  subtitle,
+  eyebrow,
+  eyebrowAvatar,
+  onTitlePress,
+  onShowAll,
+  showAllLabel = 'Show all',
+  layout = 'row',
+  itemWidth,
+  minItemWidth = 160,
+  rows = 1,
+  gap = SHELF_GAP,
+  contentInset = 0,
+  headingLevel = 2,
+  previousLabel = 'Previous',
+  nextLabel = 'Next',
+  children,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  useEffect(() => {
+    adoptStyleSheet(MEDIA_SHELF_STYLE_ID, MEDIA_SHELF_CSS);
+  }, []);
+  const ring = useMemo(() => resolveButtonRamps(theme).accent[500], [theme]);
+  const items = Children.toArray(children);
+
+  // ---- row scrolling -------------------------------------------------------
+  const scrollRef = useRef(null);
+  const scroll = useRef({
+    x: 0,
+    viewport: 0,
+    content: 0
+  });
+  const [overflow, setOverflow] = useState({
+    previous: false,
+    next: false
+  });
+  const refresh = useCallback(() => {
+    const next = shelfOverflow(scroll.current);
+    setOverflow(current => current.previous === next.previous && current.next === next.next ? current : next);
+  }, []);
+  const onScroll = useCallback(event => {
+    const {
+      contentOffset,
+      contentSize,
+      layoutMeasurement
+    } = event.nativeEvent;
+    scroll.current = {
+      x: contentOffset.x,
+      viewport: layoutMeasurement.width || scroll.current.viewport,
+      content: contentSize.width || scroll.current.content
+    };
+    refresh();
+  }, [refresh]);
+  const onTrackLayout = useCallback(event => {
+    scroll.current = {
+      ...scroll.current,
+      viewport: event.nativeEvent.layout.width
+    };
+    refresh();
+  }, [refresh]);
+  const onContentSizeChange = useCallback(width => {
+    scroll.current = {
+      ...scroll.current,
+      content: width
+    };
+    refresh();
+  }, [refresh]);
+  const page = useCallback(direction => {
+    scrollRef.current?.scrollTo({
+      x: shelfPageTarget(scroll.current, direction),
+      animated: !reducedMotion
+    });
+  }, [reducedMotion]);
+
+  // ---- grid ----------------------------------------------------------------
+  const [gridWidth, setGridWidth] = useState(0);
+  const onGridLayout = useCallback(event => {
+    const width = event.nativeEvent.layout.width;
+    setGridWidth(current => Math.abs(current - width) < 0.5 ? current : width);
+  }, []);
+  const grid = shelfGridColumns(gridWidth, minItemWidth, gap);
+  const showArrows = IS_WEB && layout === 'row' && (overflow.previous || overflow.next);
+  const header = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        gap: 2
+      },
+      children: [eyebrow ? /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8
+        },
+        children: [eyebrowAvatar != null ? /*#__PURE__*/_jsx(Avatar, {
+          source: eyebrowAvatar,
+          size: 24,
+          testID: testID ? `${testID}-eyebrow-avatar` : undefined
+        }) : null, /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: theme.colors.textSecondary,
+            flexShrink: 1
+          },
+          children: eyebrow
+        })]
+      }) : null, /*#__PURE__*/_jsx(ShelfTitle, {
+        title: title,
+        headingLevel: headingLevel,
+        onPress: onTitlePress,
+        ring: ring,
+        testID: testID ? `${testID}-title` : undefined
+      }), subtitle ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-2-regular",
+        numberOfLines: 2,
+        style: {
+          color: theme.colors.textSecondary
+        },
+        children: subtitle
+      }) : null]
+    }), onShowAll || showArrows ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        flexShrink: 0
+      },
+      children: [onShowAll ? /*#__PURE__*/_jsx(ShowAllButton, {
+        label: showAllLabel,
+        title: title,
+        onPress: onShowAll,
+        ring: ring,
+        testID: testID ? `${testID}-show-all` : undefined
+      }) : null, showArrows ? /*#__PURE__*/_jsxs(View, {
+        ...webData({
+          bloomShelfArrows: ''
+        }),
+        style: {
+          flexDirection: 'row',
+          gap: 8
+        },
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          size: "small",
+          iconOnly: true,
+          leadingIcon: RiArrowLeftSLine,
+          accessibilityLabel: `${previousLabel}: ${title}`,
+          disabled: !overflow.previous,
+          onPress: () => page(-1),
+          testID: testID ? `${testID}-previous` : undefined
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          size: "small",
+          iconOnly: true,
+          leadingIcon: RiArrowRightSLine,
+          accessibilityLabel: `${nextLabel}: ${title}`,
+          disabled: !overflow.next,
+          onPress: () => page(1),
+          testID: testID ? `${testID}-next` : undefined
+        })]
+      }) : null]
+    }) : null]
+  });
+  let body;
+  if (layout === 'grid') {
+    const limit = grid.columns > 0 && Number.isFinite(rows) ? grid.columns * Math.max(1, rows) : items.length;
+    body = /*#__PURE__*/_jsx(View, {
+      onLayout: onGridLayout,
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        columnGap: gap,
+        rowGap: gap
+      },
+      testID: testID ? `${testID}-grid` : undefined,
+      children: grid.columns > 0 ? items.slice(0, limit).map((child, index) => /*#__PURE__*/_jsx(View, {
+        style: {
+          width: grid.itemWidth,
+          minWidth: 0
+        },
+        children: child
+      }, child.key ?? index)) : null
+    });
+  } else {
+    const trackStyle = {
+      marginLeft: -contentInset,
+      marginRight: -contentInset,
+      '--bloom-shelf-inset': `${contentInset}px`
+    };
+    body = /*#__PURE__*/_jsx(ScrollView, {
+      ref: scrollRef,
+      ...webData({
+        bloomShelfTrack: ''
+      }),
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: onScroll,
+      onLayout: onTrackLayout,
+      onContentSizeChange: onContentSizeChange,
+      decelerationRate: !IS_WEB && itemWidth ? 'fast' : undefined,
+      snapToInterval: !IS_WEB && itemWidth ? itemWidth + gap : undefined,
+      snapToAlignment: !IS_WEB && itemWidth ? 'start' : undefined,
+      style: trackStyle,
+      contentContainerStyle: {
+        gap,
+        paddingLeft: contentInset,
+        paddingRight: contentInset,
+        alignItems: 'flex-start'
+      },
+      testID: testID ? `${testID}-track` : undefined,
+      children: items.map((child, index) => /*#__PURE__*/_jsx(View, {
+        ...webData({
+          bloomShelfItem: ''
+        }),
+        style: itemWidth ? {
+          width: itemWidth
+        } : undefined,
+        children: child
+      }, child.key ?? index))
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    role: "group",
+    accessibilityLabel: title,
+    style: [{
+      gap: 12,
+      minWidth: 0
+    }, style],
+    testID: testID,
+    children: [header, body]
+  });
+}
+function ShelfTitle({
+  title,
+  headingLevel,
+  onPress,
+  ring,
+  testID
+}) {
+  const theme = useTheme();
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = useInteractionState();
+  const heading = /*#__PURE__*/_jsx(Text, {
+    role: "heading",
+    "aria-level": headingLevel,
+    variant: "title-2-bold",
+    numberOfLines: 1,
+    style: {
+      color: theme.colors.text,
+      textDecorationLine: onPress && hovered ? 'underline' : 'none'
+    },
+    testID: onPress ? undefined : testID,
+    children: title
+  });
+  if (!onPress) return heading;
+  const linkStyle = {
+    alignSelf: 'flex-start',
+    maxWidth: '100%',
+    '--bloom-shelf-ring': ring
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...webData({
+      bloomShelfLink: ''
+    }),
+    role: "link",
+    accessibilityLabel: title,
+    onPress: onPress,
+    onHoverIn: onIn,
+    onHoverOut: onOut,
+    style: linkStyle,
+    testID: testID,
+    children: heading
+  });
+}
+function ShowAllButton({
+  label,
+  title,
+  onPress,
+  ring,
+  testID
+}) {
+  const theme = useTheme();
+  const {
+    state: hovered,
+    onIn,
+    onOut
+  } = useInteractionState();
+  const style = {
+    minHeight: 32,
+    justifyContent: 'center',
+    paddingLeft: 4,
+    paddingRight: 4,
+    '--bloom-shelf-ring': ring
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...webData({
+      bloomShelfLink: ''
+    }),
+    role: "button"
+    // The visible text leads the name, so a voice command of "Show all" still matches.
+    ,
+    accessibilityLabel: `${label}: ${title}`,
+    onPress: onPress,
+    onHoverIn: onIn,
+    onHoverOut: onOut,
+    hitSlop: {
+      top: 6,
+      bottom: 6,
+      left: 6,
+      right: 6
+    },
+    style: style,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-semibold",
+      numberOfLines: 1,
+      style: {
+        color: hovered ? theme.colors.text : theme.colors.textSecondary
+      },
+      children: label
+    })
+  });
+}
+export const Shelf = /*#__PURE__*/memo(ShelfComponent);
+Shelf.displayName = 'Shelf';
+//# sourceMappingURL=Shelf.js.map