@oxy.so/bloom 2.10.0 → 2.11.0

package/src/chip/types.ts

@@ -2,7 +2,20 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 import type { AccentFill, AccentTone } from '../theme/accent-colors';
 
-export type ChipSize = 'small' | 'medium' | 'large';
+/**
+ * 24 / 24 / 28 / 32 / 40 tall. `xl` and `2xl` are the filter rungs: the scale
+ * used to stop at 28, which is why five families drew their own pill. The table
+ * is in `shared.ts`.
+ */
+export type ChipSize = 'small' | 'medium' | 'large' | 'xl' | '2xl';
+
+/**
+ * The three accent fills, plus `inverted`: a hairline pill on the page that
+ * turns the page's own reading pair OVER when selected, rather than promoting
+ * to the brand tone. `shared.ts` says why that is a different idea rather than
+ * a fourth loudness.
+ */
+export type ChipVariant = AccentFill | 'inverted';
 
 /**
  * Data hues: a category, a department, an objective — colours that carry
@@ -10,6 +23,13 @@ export type ChipSize = 'small' | 'medium' | 'large';
  */
 export type ChipHue = 'lime' | 'rose' | 'yellow' | 'cyan' | 'blue' | 'purple' | 'neutral' | 'gray' | 'soft';
 
+/**
+ * What a pressable chip IS, which decides the state ARIA reads it by:
+ * a toggle `button` (`aria-pressed`), a `radio` in a radiogroup
+ * (`aria-checked`), or a `tab` in a tablist (`aria-selected`).
+ */
+export type ChipRole = 'button' | 'radio' | 'tab';
+
 export interface ChipProps {
   /** Text content of the chip. */
   children?: React.ReactNode;
@@ -18,7 +38,7 @@ export interface ChipProps {
    * `subtle` on `Badge` — one concept, two names, resolved by the shared
    * {@link AccentFill}.
    */
-  variant?: AccentFill;
+  variant?: ChipVariant;
   /** Semantic color. */
   color?: AccentTone;
   /**
@@ -45,10 +65,55 @@ export interface ChipProps {
   onClose?: () => void;
   /** Whether the chip is in a selected state. */
   selected?: boolean;
+  /**
+   * What a pressable chip is to assistive technology. Default `button`
+   * (`aria-pressed`). Use `radio` inside a `radiogroup` and `tab` inside a
+   * `tablist` — the state attribute follows the role, and a `radio` announcing
+   * `aria-pressed` is invalid.
+   */
+  role?: ChipRole;
   /** Whether the chip is disabled. */
   disabled?: boolean;
+  /**
+   * Web only, for a roving-tabindex row: `-1` takes the chip out of the tab
+   * order so the row is a single tab stop. Inert on native.
+   */
+  tabIndex?: number;
+  /**
+   * Web only: key handling for a roving-tabindex row (arrows move focus).
+   * Inert on native.
+   */
+  onKeyDown?: (event: { key: string; preventDefault: () => void }) => void;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
   testID?: string;
 }
+
+export interface ChipRowProps {
+  /** The pills. */
+  children?: React.ReactNode;
+  /** Between pills. Default 8. */
+  gap?: number;
+  /** Side padding inside the scroller, so the first and last pill clear the edge. */
+  contentInset?: number;
+  /**
+   * The colour the web edge fades blend into — the surface behind the row.
+   * Default the page background.
+   */
+  fadeColor?: string;
+  /**
+   * Room kept on every side for a pill's focus ring, taken back out again with
+   * negative margins so the row still lines up with what is above it. Default 4.
+   */
+  ringInset?: number;
+  /** What the row is: a `group` of toggles, a `radiogroup`, or a `tablist`. Default `group`. */
+  role?: 'group' | 'radiogroup' | 'tablist';
+  /** Names the row. Required for anything but a plain `group` of self-naming pills. */
+  accessibilityLabel?: string;
+  /** Marks the whole row disabled to assistive technology (web `aria-disabled`). */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/composer-panel/ComposerControls.tsx

@@ -13,6 +13,7 @@ import Animated, {
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import { paintToCssImage, type ButtonStatePaint } from '../button/shared';
+import { DISABLED_OPACITY } from '../styles/tokens';
 import { RiArrowUpLine } from '../icons/remix/RiArrowUpLine';
 import { RiMic2Line } from '../icons/remix/RiMic2Line';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -187,7 +188,7 @@ function GradientFill({ paint, opacity = 1 }: { paint: ButtonStatePaint; opacity
 /**
  * Send (`bg-button-primary` disc): the accent gradient, its hover
  * gradient crossfading in over 150ms, the active gradient while held; disabled
- * paints the disabled gradient at 40% opacity (200ms). White 20px arrow.
+ * paints the disabled gradient at the disabled opacity (200ms). White 20px arrow.
  */
 export function SendButton({
   disabled,
@@ -211,7 +212,7 @@ export function SendButton({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 9999,
-    opacity: disabled ? 0.4 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     cursor: disabled ? 'auto' : 'pointer',
     '--bloom-composer-ring': palette.focusRing,
   };

package/src/content-panel/ContentPanel.tsx

@@ -33,11 +33,14 @@
 import React, { memo } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 
+import { useOptionalPanelChrome } from '../styles/panel-chrome';
 import { StyledView } from '../styles/styled-primitives';
+import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
 import {
   ContentPanelNestingContext,
   useContentPanelNestingGuard,
 } from './context';
+import { usePanelSurfaceFill } from './shared';
 import type { ContentPanelFramedBreakpoint, ContentPanelProps } from './types';
 
 /**
@@ -70,11 +73,17 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
+  surfaceColor,
+  chrome = 'elevated',
+  shadow,
   contentClassName,
   contentStyle,
 }) => {
   // Dev-only invariant — a ContentPanel must never be nested inside another.
   useContentPanelNestingGuard();
+  const panelChrome = useOptionalPanelChrome();
+  // What the panel tells its subtree it is painted in (`./shared.ts`).
+  const publishedFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
 
   // Tri-state: `undefined` → responsive (breakpoint-gated), `true` → always
   // framed, `false` → never framed (plain full-bleed). Whole literal class
@@ -89,13 +98,35 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
         ? 'flex-1 overflow-hidden rounded-radius-28 border border-border'
         : 'flex-1';
   const surfaceClass = [surfaceBase, surfaceClassName ?? 'bg-card'].join(' ');
+  // Native has no overlays: the surface itself carries the edge. `none` drops
+  // both, `border` keeps the class-drawn hairline, `elevated` adds the lift.
+  const chromeStyle =
+    framed === false || chrome === 'none' || chrome === 'border'
+      ? null
+      : shadow || panelChrome
+        ? { boxShadow: shadow ?? panelChrome?.shadow }
+        : null;
   const contentClass = ['flex-1', contentClassName].filter(Boolean).join(' ');
 
   return (
     <ContentPanelNestingContext.Provider value={true}>
-      <StyledView className={surfaceClass} style={surfaceStyle}>
+      <StyledView
+        className={surfaceClass}
+        style={[
+          // The surface variable rides the element that carries the fill, so
+          // the two can never disagree. A no-op on native; the provider below
+          // is what answers there. (`styles/surface-levels.ts`.)
+          surfaceFillVars(publishedFill),
+          chromeStyle,
+          surfaceStyle,
+        ]}
+      >
         <StyledView className={contentClass} style={contentStyle}>
-          {children}
+          {/* The panel is a surface: everything inside is sitting on rung 1,
+              painted in the colour this panel actually paints. */}
+          <SurfaceLevelProvider level={1} fill={publishedFill}>
+            {children}
+          </SurfaceLevelProvider>
         </StyledView>
       </StyledView>
     </ContentPanelNestingContext.Provider>

package/src/content-panel/ContentPanel.web.tsx

@@ -87,11 +87,14 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 
 import { StyledView } from '../styles/styled-primitives';
 
+import { useOptionalPanelChrome } from '../styles/panel-chrome';
+import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import {
   ContentPanelNestingContext,
   useContentPanelNestingGuard,
 } from './context';
+import { usePanelSurfaceFill } from './shared';
 import type { ContentPanelFramedBreakpoint, ContentPanelProps } from './types';
 
 /** Width (in px) of the sticky gutter-mask box-shadow ring. */
@@ -147,17 +150,26 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   framedFrom = 768,
   surfaceClassName,
   surfaceStyle,
+  surfaceColor,
   contentClassName,
   contentStyle,
   showStickyFrame,
+  chrome = 'elevated',
+  shadow,
   maskColor,
-  overlaySizing = 'viewport',
+  overlaySizing = 'panel',
   overlayTopOffset,
 }) => {
   // Dev-only invariant — must run unconditionally (before deriving any
   // mode-specific branch) so the hook order stays stable (rules of hooks).
   useContentPanelNestingGuard();
   const { colors } = useTheme();
+  // The floating-panel edge the `Sidebar` wears. Optional: the panel drew its
+  // own surface long before it had a shadow, so it must not start throwing
+  // outside a provider.
+  const panelChrome = useOptionalPanelChrome();
+  // What the panel tells its subtree it is painted in (`./shared.ts`).
+  const publishedFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
 
   // Tri-state: `undefined` → responsive (md:-gated), `true` → always framed,
   // `false` → never framed (full-bleed).
@@ -223,7 +235,17 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
 
   return (
     <ContentPanelNestingContext.Provider value={true}>
-      <StyledView testID="content-panel-surface" className={surfaceClass} style={surfaceStyle}>
+      <StyledView
+        testID="content-panel-surface"
+        className={surfaceClass}
+        style={[
+          // `--bloom-surface` rides the element that carries the fill, so CSS
+          // below the panel and `useSurfaceFill()` below the panel cannot
+          // disagree about what the panel painted.
+          surfaceFillVars(publishedFill),
+          surfaceStyle,
+        ]}
+      >
         {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. Not
             rendered when never-framed; `max-md:hidden` (display:none <md) when
             responsive, so the breakpoint is decided in CSS, not by remounting. */}
@@ -244,12 +266,17 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
         )}
         {/* (2) Border-frame overlay — one continuous rounded border, above all.
             Same visibility gating as the bleed-mask. */}
-        {showOverlays && showStickyFrame !== false && (
+        {showOverlays && showStickyFrame !== false && chrome !== 'none' && (
           <StyledView
             key="border-frame"
             testID="content-panel-border-frame"
             pointerEvents="none"
-            style={topOffsetStyle}
+            // The shadow rides the SAME element as the hairline, so the lift and
+            // the edge can never disagree about where the panel ends. It paints
+            // outward, into the gutter the page background shows.
+            style={[topOffsetStyle, chrome === 'elevated' && (shadow || panelChrome)
+                ? { boxShadow: shadow ?? panelChrome?.shadow }
+                : null]}
             className={
               boundToPanel
                 ? `web:[grid-area:1/1] z-[120] h-full w-full rounded-radius-28 border border-border ${responsive ? bp.overlayHidden : ''}`
@@ -264,7 +291,11 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             scroll/virtualizer + refetch on a breakpoint cross). Clipped to the
             rounded panel shape on web when framed. */}
         <StyledView key="content" testID="content-panel-content" className={contentClass} style={contentStyle}>
-          {children}
+          {/* The panel is a surface: everything inside is sitting on rung 1,
+              painted in the colour this panel actually paints. */}
+          <SurfaceLevelProvider level={1} fill={publishedFill}>
+            {children}
+          </SurfaceLevelProvider>
         </StyledView>
       </StyledView>
     </ContentPanelNestingContext.Provider>

package/src/content-panel/index.ts

@@ -4,4 +4,4 @@ export {
   PANEL_BOTTOM_INSET,
   ContentPanel,
 } from './ContentPanel';
-export type { ContentPanelFramedBreakpoint, ContentPanelProps } from './types';
+export type { ContentPanelChrome, ContentPanelFramedBreakpoint, ContentPanelProps } from './types';

package/src/content-panel/index.web.ts

@@ -4,4 +4,4 @@ export {
   PANEL_BOTTOM_INSET,
   ContentPanel,
 } from './ContentPanel.web';
-export type { ContentPanelFramedBreakpoint, ContentPanelProps } from './types';
+export type { ContentPanelChrome, ContentPanelFramedBreakpoint, ContentPanelProps } from './types';

package/src/content-panel/shared.ts

@@ -0,0 +1,76 @@
+/**
+ * What the panel tells its subtree it is painted in — shared by both forks, so
+ * web and native cannot answer the question differently.
+ *
+ * `ContentPanel` is the surface an app's routed content sits on, which makes it
+ * the container most often asked "what colour are you?" — by a sticky header
+ * that has to be opaque over the scrolling column, a tab rail, a search field's
+ * backing, a reply bar pinned to the bottom. Every one of those had to repeat
+ * the panel's own `bg-card` at its call site, and repeating it is what makes a
+ * change to the panel's surface a sweep through the app instead of one prop.
+ *
+ * So the panel publishes it: `styles/surface-levels.ts` carries the mechanism
+ * (the ambient rung, the exact `fill`, and the web variable), and this decides
+ * WHICH colour is the honest answer for a given set of props.
+ */
+import { useContext } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { BloomThemeContext } from '../theme/BloomThemeProvider';
+
+/**
+ * Whether a caller's `surfaceStyle` repaints the surface.
+ *
+ * Walked by hand rather than with `StyleSheet.flatten` for the reason
+ * `styles/flatten-web-style.ts` records: this repo's `react-native` jest mock
+ * stubs `flatten` as an identity no-op, so an array style would pass through
+ * unflattened and the answer would silently differ between a test and an app.
+ * Later entries win, mirroring React-Native array-style precedence; falsy holes
+ * and registered-style ids (bare numbers, unresolvable without the RN runtime)
+ * are skipped, and an id is treated as "cannot know" rather than "no colour".
+ */
+function repaintedByStyle(style: StyleProp<ViewStyle>): boolean {
+  if (!style) return false;
+  if (Array.isArray(style)) {
+    return style.some((entry) => repaintedByStyle(entry as StyleProp<ViewStyle>));
+  }
+  if (typeof style === 'number') return true;
+  return typeof style === 'object' && 'backgroundColor' in style && style.backgroundColor != null;
+}
+
+/**
+ * The exact fill the panel publishes, or `undefined` when it cannot know it.
+ *
+ * Four cases, in order:
+ *
+ *  - `surfaceColor` given — the caller stated it; nothing beats that.
+ *  - `surfaceClassName` given — the caller REPAINTED the surface with a utility
+ *    Bloom cannot resolve to a colour (that is the whole point of the prop), so
+ *    publishing `card` would be a confident lie. The panel falls back to
+ *    publishing the rung alone, which is the weaker answer it had before —
+ *    `surfaceColor` is how a caller in this case gets the exact one back.
+ *  - `surfaceStyle` carrying a `backgroundColor` — the same repaint by the other
+ *    door, and the panel has to stop claiming `card` for it too. The colour is
+ *    right there, but WHICH of the two paints is a platform question the panel
+ *    must not guess at: `styled()` appends the class descriptor AFTER the style
+ *    prop, so on native the class wins the array, while on web the inline style
+ *    wins the cascade. Publishing either one would be right on one platform and
+ *    quietly wrong on the other, so the panel publishes neither and the caller
+ *    names it with `surfaceColor`.
+ *  - none of them — the panel paints `bg-card`, so it publishes `colors.card`.
+ *
+ * Outside a `BloomThemeProvider` there is no palette to name, and the panel has
+ * always rendered there on native, so this stays optional rather than throwing:
+ * a panel does not start failing at the moment it gets more informative.
+ */
+export function usePanelSurfaceFill(
+  surfaceClassName: string | undefined,
+  surfaceStyle: StyleProp<ViewStyle>,
+  surfaceColor: string | undefined,
+): string | undefined {
+  const ctx = useContext(BloomThemeContext);
+  if (surfaceColor) return surfaceColor;
+  if (surfaceClassName) return undefined;
+  if (repaintedByStyle(surfaceStyle)) return undefined;
+  return ctx?.theme.colors.card;
+}

package/src/content-panel/types.ts

@@ -12,6 +12,9 @@ import { type StyleProp, type ViewStyle } from 'react-native';
  */
 export type ContentPanelFramedBreakpoint = 500 | 640 | 768 | 1024;
 
+/** How a framed `ContentPanel` draws its edge. */
+export type ContentPanelChrome = 'elevated' | 'border' | 'none';
+
 export interface ContentPanelProps {
   children: React.ReactNode;
   /**
@@ -30,9 +33,48 @@ export interface ContentPanelProps {
    * to `768` (Tailwind `md`), reproducing the prior fixed behavior exactly.
    */
   framedFrom?: ContentPanelFramedBreakpoint;
+  /**
+   * The panel's EDGE, when it is framed.
+   *
+   * - `'elevated'` (DEFAULT) — the hairline plus the floating-panel shadow the
+   *   `Sidebar` wears (`styles/panel-chrome.ts`), so the panel reads as a
+   *   surface lifted off the page rather than a box drawn on it.
+   * - `'border'` — the hairline alone, which is what this panel drew before.
+   * - `'none'` — no edge at all: a flat surface that still clips and rounds,
+   *   for an app whose page background already separates the two.
+   *
+   * Ignored while the panel is full-bleed (below `framedFrom`, or
+   * `framed={false}`) — there is no edge to draw.
+   */
+  chrome?: ContentPanelChrome;
+  /**
+   * Overrides the shadow `chrome="elevated"` draws (any `box-shadow` string).
+   * For an app that wants its own elevation without giving up the hairline.
+   */
+  shadow?: string;
   /** Override the surface background utility (defaults to `bg-card`). */
   surfaceClassName?: string;
   surfaceStyle?: StyleProp<ViewStyle>;
+  /**
+   * The colour this panel paints, when `surfaceClassName`/`surfaceStyle` has
+   * repainted it.
+   *
+   * The panel PUBLISHES its fill to everything inside it — `useSurfaceFill()`
+   * and, on web, `var(--bloom-surface)` — so in-panel chrome that has to be
+   * opaque in the panel's own colour (a sticky header, a tab rail, a reply bar)
+   * can ask instead of repeating a class. By default that colour is
+   * `theme.colors.card`, which is what the panel paints.
+   *
+   * A `surfaceClassName` override is a utility Bloom cannot resolve to a colour,
+   * so the panel stops claiming to know one rather than publishing a wrong
+   * answer — this prop is how the override says what it painted, and it is
+   * needed only then. A `surfaceStyle` carrying a `backgroundColor` is the same
+   * repaint by the other door and stops the claim the same way: the colour is
+   * legible there, but which of the class and the style actually paints differs
+   * by platform, so the panel refuses to guess. It changes nothing about how the
+   * panel LOOKS: the class or the style still paints the surface.
+   */
+  surfaceColor?: string;
   /** Extra utilities for the inner content wrapper. */
   contentClassName?: string;
   contentStyle?: StyleProp<ViewStyle>;
@@ -64,6 +106,19 @@ export interface ContentPanelProps {
    *   above it) must never be overlapped by an overlay sized to the whole
    *   viewport.
    */
+  /**
+   * DEFAULT `'panel'`. The edge describes the panel's OWN box, so it scrolls
+   * with the content like any other border: on a page taller than the screen
+   * you see the two side edges while scrolling and the rounded corners at the
+   * ends, which is what a long framed column looks like.
+   *
+   * `'viewport'` is the older behaviour: the frame is a screen-tall sticky
+   * rectangle, so a rounded top and bottom edge follow the viewport down the
+   * page. It reads as the panel breathing — the frame holds still while the
+   * content moves inside it, and it jumps 8px on the first scroll — which is
+   * why it is no longer the default. It remains for a consumer that wants that
+   * constant frame.
+   */
   overlaySizing?: 'viewport' | 'panel';
   /**
    * Pixels of REAL, persistent chrome the consumer has placed above the panel

package/src/creator-studio/ArtworkUploader.tsx

@@ -9,9 +9,10 @@ import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
 import { RiImageLine } from '../icons/remix/RiImageLine';
 import { RiRefreshLine } from '../icons/remix/RiRefreshLine';
 import { useImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { CARD_RADIUS, isImageUrl, resolveCreatorStudioPaint } from './shared';
+import { CARD_RADIUS, resolveCreatorStudioPaint } from './shared';
 import type { ArtworkUploaderLabels, ArtworkUploaderProps } from './types';
 
 /**

package/src/creator-studio/ReleaseCard.tsx

@@ -2,7 +2,8 @@ import React, { memo, useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
 import { mixColor, resolveButtonRamps } from '../button/shared';
-import { Button } from '../button';
+import { Badge } from '../badge';
+import { GlyphButton } from '../button';
 import { Chip } from '../chip';
 import {
   DropdownMenu,
@@ -15,6 +16,7 @@ import { RiAlbumLine } from '../icons/remix/RiAlbumLine';
 import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
 import { RiMoreFill } from '../icons/remix/RiMoreFill';
 import { useImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
@@ -24,7 +26,6 @@ import {
   COVER_RADIUS,
   CREATOR_STUDIO_CSS,
   CREATOR_STUDIO_STYLE_ID,
-  isImageUrl,
   pressDataSet,
   RELEASE_STATUS_LABELS,
   RELEASE_STATUS_TONES,
@@ -35,16 +36,27 @@ import {
 import type { ReleaseCardLabels, ReleaseCardProps, ReleaseStatusBadgeProps } from './types';
 
 /**
- * `ReleaseStatusBadge`: a release's distribution status as a `Chip` — the
- * tone per status is `RELEASE_STATUS_TONES` (draft default, in review warning,
- * scheduled info, live success, rejected error, taken down error outlined).
+ * `ReleaseStatusBadge`: a release's distribution status as a `Badge` on a label
+ * rung — the tone per status is `RELEASE_STATUS_TONES` (draft default, in
+ * review warning, scheduled info, live success, rejected error, taken down
+ * error outlined).
+ *
+ * `Badge`, not `Chip`. It is the shape the whole fleet uses for a status that
+ * is read rather than pressed — `tenancy`, `eviction` and `booking` all draw
+ * theirs as a `Badge` over a `status -> { tone, fill }` map — and a `Chip` with
+ * no `onPress` is a pill that merely looks like a control. This was a `Chip`
+ * `small`/`medium`, both 24 tall; the label rungs are 20 and 24.
  */
 export function ReleaseStatusBadge({ status, label, size = 'small', testID }: ReleaseStatusBadgeProps) {
   const { tone, fill } = RELEASE_STATUS_TONES[status];
   return (
-    <Chip size={size} color={tone} variant={fill} testID={testID}>
-      {label ?? RELEASE_STATUS_LABELS[status]}
-    </Chip>
+    <Badge
+      size={size === 'small' ? 'label-small' : 'label-medium'}
+      color={tone}
+      variant={fill}
+      content={label ?? RELEASE_STATUS_LABELS[status]}
+      testID={testID}
+    />
   );
 }
 
@@ -158,11 +170,16 @@ function ReleaseCardComponent({
     actions.length > 0 ? (
       <DropdownMenu>
         <DropdownMenuTrigger asChild label={labels.actions(release.title)}>
-          <Button
-            variant="secondary"
-            size="small"
-            iconOnly
-            leadingIcon={RiMoreFill}
+          {/* The neutral transparent ⋯: the same affordance `media-card`
+              draws, rather than a bordered `secondary` on a card that already
+              has a border. */}
+          <GlyphButton
+            size={32}
+            icon={RiMoreFill}
+            glyphSize={20}
+            color={paint.textSecondary}
+            hoverColor={paint.text}
+            ring={paint.ring}
             accessibilityLabel={labels.actions(release.title)}
             testID={testID ? `${testID}-actions` : undefined}
           />

package/src/creator-studio/TopTracksTable.tsx

@@ -9,9 +9,10 @@ import { RiArrowUpLine } from '../icons/remix/RiArrowUpLine';
 import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
 import { RiSubtractLine } from '../icons/remix/RiSubtractLine';
 import { useImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { isImageUrl, resolveCreatorStudioPaint, type CreatorStudioPaint } from './shared';
+import { resolveCreatorStudioPaint, type CreatorStudioPaint } from './shared';
 import type { TopTrackTrend, TopTracksTableLabels, TopTracksTableProps } from './types';
 
 /**

package/src/creator-studio/TrackUploadRow.tsx

@@ -17,6 +17,7 @@ import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
 import { RiFileMusicLine } from '../icons/remix/RiFileMusicLine';
 import { RiRefreshLine } from '../icons/remix/RiRefreshLine';
+import { Meter } from '../stat-bar';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -42,7 +43,7 @@ import type { TrackUploadRowLabels, TrackUploadRowProps } from './types';
  *   name      `body-medium` truncating, size `caption-1-regular` text-tertiary
  *   status    queued     "Queued" text-secondary
  *             uploading  4px bar (track / accent) + "42% · About 20 s left",
- *                        tabular; a `progressbar` named "Uploading <file>"
+ *                        tabular; a `Meter` named "Uploading <file>"
  *             processing a 40%-wide segment sweeping the track every 1.4s
  *                        (static under reduced motion) + "Transcoding…"
  *             ready      a placeholder waveform (bars from the file name) +
@@ -220,17 +221,16 @@ function TrackUploadRowComponent({
           </Text>
         </View>
         {bar === 'determinate' ? (
-          <View
-            accessibilityRole="progressbar"
-            aria-valuemin={0}
-            aria-valuemax={100}
-            aria-valuenow={percent}
+          <Meter
+            value={percent}
+            max={100}
+            height={BAR_HEIGHT}
+            fill={paint.accent}
+            track={paint.track}
             accessibilityLabel={labels.progress(fileName)}
+            valueText={`${percent}%`}
             testID={testID ? `${testID}-progress` : undefined}
-            style={[styles.bar, { backgroundColor: paint.track }]}
-          >
-            <View style={[styles.fill, { width: `${percent}%`, backgroundColor: paint.accent }]} />
-          </View>
+          />
         ) : bar === 'indeterminate' ? (
           <IndeterminateBar paint={paint} testID={testID ? `${testID}-processing` : undefined} />
         ) : status === 'ready' ? (