@oxy.so/bloom 2.9.0 → 2.11.0

package/src/settings-modal/SettingsTools.tsx

@@ -30,7 +30,8 @@ import type {
   SettingsServerTone,
   SettingsToolsPageProps,
 } from './types';
-import { useSettingsWebCss, webData } from './web-css';
+import { useSettingsWebCss } from './web-css';
+import { webDataSet } from '../styles/web-data';
 
 /**
  * The Tools page (`settings/settings-tools.tsx`) — MCP server management:
@@ -166,7 +167,7 @@ function InlineAction({ label, onPress, accessibilityLabel }: { label: string; o
     <Pressable
       role="button"
       accessibilityLabel={accessibilityLabel}
-      {...webData({ bloomSettingsPress: '' })}
+      {...webDataSet({ bloomSettingsPress: '' })}
       onPress={onPress}
       onHoverIn={() => setHovered(true)}
       onHoverOut={() => setHovered(false)}
@@ -229,7 +230,7 @@ function ServerMenu({
         <Pressable
           role="button"
           accessibilityLabel={label}
-          {...webData({ bloomSettingsPress: '' })}
+          {...webDataSet({ bloomSettingsPress: '' })}
           onHoverIn={() => setHovered(true)}
           onHoverOut={() => setHovered(false)}
           style={[
@@ -313,7 +314,7 @@ function ServerRow({
                   accessibilityLabel={`${expanded ? 'Hide' : 'Show'} ${server.name} tools`}
                   aria-expanded={expanded}
                   accessibilityState={{ expanded }}
-                  {...webData({ bloomSettingsPress: '' })}
+                  {...webDataSet({ bloomSettingsPress: '' })}
                   onPress={() => setExpanded((v) => !v)}
                   onHoverIn={() => setChevronHovered(true)}
                   onHoverOut={() => setChevronHovered(false)}
@@ -377,7 +378,7 @@ function NewServerRow({
     <Pressable
       role="button"
       accessibilityLabel={label}
-      {...webData({ bloomSettingsPress: '', ringInset: '' })}
+      {...webDataSet({ bloomSettingsPress: '', ringInset: '' })}
       onPress={onPress}
       onHoverIn={() => setHovered(true)}
       onHoverOut={() => setHovered(false)}
@@ -479,7 +480,7 @@ function ScopePills({
     <ScrollView
       horizontal
       showsHorizontalScrollIndicator={false}
-      {...webData({ bloomSettingsScroll: '' })}
+      {...webDataSet({ bloomSettingsScroll: '' })}
       style={styles.pillScroller}
       contentContainerStyle={styles.pillList}
     >
@@ -497,7 +498,7 @@ function ScopePills({
               accessibilityLabel={scope.label}
               aria-pressed={selected}
               accessibilityState={{ selected }}
-              {...webData({ bloomSettingsPress: '' })}
+              {...webDataSet({ bloomSettingsPress: '' })}
               onPress={() => onChange(scope.id)}
               onHoverIn={() => setHovered(scope.id)}
               onHoverOut={() => setHovered((cur) => (cur === scope.id ? null : cur))}

package/src/settings-modal/web-css.ts

@@ -52,7 +52,3 @@ export function useSettingsWebCss(): void {
   }, []);
 }
 
-/** `dataSet` for a react-native-web node; nothing on native. */
-export function webData(data: Record<string, string>): Record<string, unknown> {
-  return IS_WEB ? { dataSet: data } : {};
-}

package/src/sidebar/Sidebar.tsx

@@ -25,6 +25,7 @@ import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { ThemeToggle } from '../theme-toggle';
 import { Text, TYPE_SCALE } from '../typography';
+import { SidebarSizeProvider, SIDEBAR_METRICS } from './metrics';
 import { useSidebarPalette, type SidebarPalette } from './palette';
 import { Collapsible, CollapseProvider, IS_WEB, MORPH_MS, useSidebarWebCss } from './parts';
 import { SidebarFolder } from './SidebarFolder';
@@ -40,11 +41,13 @@ import type { SidebarNavItem, SidebarProps } from './types';
 /**
  * `Sidebar` — the floating app rail, expanded or collapsed.
  *
- *   panel      260 wide expanded (p12), 52 collapsed (px7 py12 — with the 1px
- *              border that leaves exactly the 36px item column; 60/px11
- *              reads loose around a pill column), radius 24,
- *              1px border-button-white, shadow-sidebar, background-secondary;
- *              `flat` drops the chrome onto background-full
+ *   panel      `size` wide expanded (p12), its collapsed width at px7 py12 —
+ *              with the 1px border that leaves exactly the size's item column
+ *              (`metrics.ts`; `medium` is the historical 260 / 52 / 36)
+ *   surface    `card` radius 24, 1px border-button-white, shadow-sidebar,
+ *              background-secondary; `plain` drops the chrome onto
+ *              background-full; `docked` keeps the fill, squares the corners
+ *              and leaves one hairline on the inner edge, full height
  *   top        scroller (−8 margin / 8 padding, so rings and the profile pill
  *              are not clipped), gap 12: account switcher + collapse control
  *              (a column, avatar last, when collapsed), quick search, nav
@@ -63,10 +66,6 @@ import type { SidebarNavItem, SidebarProps } from './types';
  */
 
 const EASE_IN_OUT = Easing.bezier(0.4, 0, 0.2, 1);
-const EXPANDED_WIDTH = 260;
-const COLLAPSED_WIDTH = 52;
-/** Horizontal padding while collapsed: (52 − 2 × 1px border − 36px column) / 2. */
-const COLLAPSED_PADDING_X = 7;
 
 function matchesQuery(label: string, query: string): boolean {
   return label.toLocaleLowerCase().includes(query);
@@ -146,7 +145,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   mobile = false,
   onClose,
   fluid = false,
-  flat = false,
+  surface = 'card',
+  size = 'medium',
   showThemeToggle = true,
   showSearch = true,
   searchShortcutLabel = '⌘L',
@@ -165,6 +165,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   testID,
 }) => {
   const palette = useSidebarPalette();
+  const metrics = SIDEBAR_METRICS[size];
   useSidebarWebCss();
   const reducedMotion = useReducedMotion();
 
@@ -192,8 +193,9 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   }, [collapsed, reducedMotion, progress]);
 
   // `fluid` fills its container while expanded; the morph needs a number, so
-  // the last expanded width is measured.
-  const expandedWidth = useSharedValue(EXPANDED_WIDTH);
+  // the last expanded width is measured. The collapsed end is the size's own.
+  const collapsedWidth = metrics.collapsed;
+  const expandedWidth = useSharedValue(metrics.expanded);
   const onPanelLayout = useCallback(
     (event: LayoutChangeEvent) => {
       if (fluid && !collapsed) expandedWidth.value = event.nativeEvent.layout.width;
@@ -203,8 +205,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   const panelStyle = useAnimatedStyle(() => {
     const p = progress.value;
     if (fluid && p === 0) return { width: '100%' };
-    return { width: expandedWidth.value + (COLLAPSED_WIDTH - expandedWidth.value) * p };
-  }, [progress, expandedWidth, fluid]);
+    return { width: expandedWidth.value + (collapsedWidth - expandedWidth.value) * p };
+  }, [progress, expandedWidth, fluid, collapsedWidth]);
   const navInset = useAnimatedStyle(() => {
     const inset = 2 * (1 - progress.value);
     return { paddingLeft: inset, paddingRight: inset };
@@ -299,17 +301,29 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   };
 
   // ---- chrome ------------------------------------------------------------
-  const chrome: WebCssStyle = flat
-    ? { backgroundColor: palette.flat }
-    : {
-        borderRadius: 24,
-        borderWidth: 1,
-        borderColor: palette.panelBorder,
-        backgroundColor: palette.panel,
-        boxShadow: palette.panelShadow,
-      };
+  // Three surfaces, one place. `docked` keeps the panel fill and spends its
+  // edge on ONE hairline — the side facing the content — because a column
+  // flush to the window has no other edge to draw: a border all the way round
+  // would draw two lines nobody can see and one they can.
+  const chrome: WebCssStyle =
+    surface === 'plain'
+      ? { backgroundColor: palette.flat }
+      : surface === 'docked'
+        ? {
+            backgroundColor: palette.panel,
+            borderRightWidth: 1,
+            borderRightColor: palette.dockedEdge,
+          }
+        : {
+            borderRadius: 24,
+            borderWidth: 1,
+            borderColor: palette.panelBorder,
+            backgroundColor: palette.panel,
+            boxShadow: palette.panelShadow,
+          };
 
-  const flatMobile = mobile && flat;
+  const plain = surface === 'plain';
+  const flatMobile = mobile && plain;
   const searchRing = `inset 0 0 0 2px ${palette.searchRing}`;
   const placeholder = searchPlaceholder ?? (flatMobile ? 'Search...' : 'Search navigation…');
 
@@ -492,7 +506,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         collapsed={collapsed}
         suppressHover={suppressUserHover}
         onHoverSuppressionEnd={() => setSuppressUserHover(false)}
-        avatarBackground={flat ? palette.avatarFlat : undefined}
+        avatarBackground={plain ? palette.avatarFlat : undefined}
         testID="sidebar-account"
       />
     </View>
@@ -530,6 +544,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   );
 
   return (
+    <SidebarSizeProvider value={size}>
     <CollapseProvider value={progress}>
       <Animated.View
         role="complementary"
@@ -543,10 +558,10 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             flexDirection: 'column',
             justifyContent: 'space-between',
             overflow: 'hidden',
-            paddingTop: 12,
-            paddingBottom: 12,
-            paddingLeft: collapsed ? COLLAPSED_PADDING_X : 12,
-            paddingRight: collapsed ? COLLAPSED_PADDING_X : 12,
+            paddingTop: metrics.padding,
+            paddingBottom: metrics.padding,
+            paddingLeft: collapsed ? metrics.collapsedPaddingX : metrics.padding,
+            paddingRight: collapsed ? metrics.collapsedPaddingX : metrics.padding,
           },
           chrome,
           panelStyle,
@@ -559,7 +574,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
           <View style={{ width: '100%', minHeight: 0, flexShrink: 1, gap: 12 }}>
             {headerRow}
             {modeSwitcher}
-            {showSearch && !flat ? searchButton : null}
+            {showSearch && !flatMobile ? searchButton : null}
             <ScrollView
               {...(IS_WEB ? { dataSet: { bloomSidebarScroll: 'none' } } : {})}
               style={{ flexGrow: 0, flexShrink: 1, minHeight: 0 }}
@@ -610,7 +625,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
           {modeSwitcher}
 
           <View style={{ width: '100%', gap: 12 }}>
-            {showSearch && !flat ? searchButton : null}
+            {showSearch && !flatMobile ? searchButton : null}
             <Animated.View role="navigation" style={[{ width: '100%', gap: 4 }, navInset]}>
               {nothingMatches ? (
                 <Text
@@ -634,7 +649,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             ) : (
               <ThemeToggle
                 appearance="sidebar-segmented"
-                style={flat ? { backgroundColor: palette.panel } : undefined}
+                style={plain ? { backgroundColor: palette.panel } : undefined}
               />
             )
           ) : null}
@@ -647,20 +662,21 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             <SidebarPlanCard
               plan={plan}
               collapsed={collapsed}
-              style={flat && !collapsed ? { backgroundColor: palette.panel } : undefined}
+              style={plain && !collapsed ? { backgroundColor: palette.panel } : undefined}
               testID="sidebar-plan"
             />
           ) : team ? (
             <SidebarTeamMenu
               team={team}
               collapsed={collapsed}
-              style={flat && !collapsed ? { backgroundColor: palette.panel } : undefined}
+              style={plain && !collapsed ? { backgroundColor: palette.panel } : undefined}
               testID="sidebar-team"
             />
           ) : null}
         </View>
       </Animated.View>
     </CollapseProvider>
+    </SidebarSizeProvider>
   );
 };
 

package/src/sidebar/SidebarItem.tsx

@@ -4,6 +4,7 @@ import { Pressable, View, type GestureResponderEvent } from 'react-native';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
+import { useSidebarMetrics } from './metrics';
 import { useSidebarPalette } from './palette';
 import { borderRadius } from '../styles/tokens';
 import { Collapsible, IS_WEB, useInSidebar, useSidebarWebCss } from './parts';
@@ -12,9 +13,10 @@ import type { SidebarItemProps } from './types';
 /**
  * A sidebar nav item.
  *
- *   row        p8, full pill, label/badge space-between;
- *              full width expanded, 36px square collapsed
- *   content    icon 20 + 8 gap + body-medium label (no wrap)
+ *   row        the size's inset, full pill, label/badge space-between;
+ *              full width expanded, the size's square collapsed
+ *   content    the size's glyph + 8 gap + its label step (no wrap) —
+ *              `medium` is 20 and `body-medium` (`metrics.ts`)
  *   rest       icon-secondary / text-secondary; hover background-secondary-hover
  *   selected   solid accent-500 fill with the primary foreground; no
  *              gradient, ring or top highlight
@@ -25,6 +27,7 @@ import type { SidebarItemProps } from './types';
 const SidebarItemComponent: React.FC<SidebarItemProps> = ({
   icon: Icon,
   label,
+  size,
   href,
   badge,
   selected = false,
@@ -34,6 +37,7 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
   testID,
 }) => {
   const palette = useSidebarPalette();
+  const metrics = useSidebarMetrics(size);
   useSidebarWebCss();
   const { state: hovered, onIn, onOut } = useInteractionState();
   const inSidebar = useInSidebar();
@@ -44,12 +48,13 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
     alignItems: 'center',
     justifyContent: 'space-between',
     overflow: 'hidden',
-    padding: 8,
+    padding: metrics.row.padding,
     borderRadius: borderRadius.full,
-    // In a sidebar the row stretches with the panel, which morphs 260 → 52, so
-    // the row's width animates with it; standalone, collapsed is the 36px square.
+    // In a sidebar the row stretches with the panel, which morphs between the
+    // size's two widths, so the row's width animates with it; standalone,
+    // collapsed is the size's own square.
     alignSelf: collapsed && !inSidebar ? 'flex-start' : 'stretch',
-    width: collapsed && !inSidebar ? 36 : undefined,
+    width: collapsed && !inSidebar ? metrics.row.square : undefined,
     backgroundColor: selected ? palette.selected : hovered ? palette.rowHover : 'transparent',
     '--bloom-sidebar-ring': palette.ring,
   };
@@ -80,12 +85,12 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
       style={[rowStyle, style]}
       testID={testID}
     >
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, minWidth: 0, flexShrink: 1 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: metrics.row.gap, minWidth: 0, flexShrink: 1 }}>
         <View style={{ flexShrink: 0 }}>
-          <Icon width={20} height={20} fill={foreground} />
+          <Icon width={metrics.row.icon} height={metrics.row.icon} fill={foreground} />
         </View>
         <Collapsible collapsed={collapsed}>
-          <Text variant="body-medium" numberOfLines={1} style={{ color: foreground }}>
+          <Text variant={metrics.row.label} numberOfLines={1} style={{ color: foreground }}>
             {label}
           </Text>
         </Collapsible>

package/src/sidebar/index.ts

@@ -1,6 +1,7 @@
 export { Sidebar } from './Sidebar';
 export { SidebarFolder } from './SidebarFolder';
 export { SidebarItem } from './SidebarItem';
+export { SIDEBAR_METRICS } from './metrics';
 export { SidebarModeSwitcher } from './SidebarModeSwitcher';
 export { SidebarPlanCard } from './SidebarPlanCard';
 export { SIDEBAR_RAIL_WIDTH } from './SidebarRail';
@@ -8,6 +9,8 @@ export { SidebarRailItem } from './SidebarRailItem';
 export { SidebarTeamMenu } from './SidebarTeamMenu';
 export { SidebarAccountMenuContent, SidebarUserMenu } from './SidebarUserMenu';
 
+export type { SidebarMetrics } from './metrics';
+
 export type {
   SidebarAccount,
   SidebarAccountUser,
@@ -26,6 +29,8 @@ export type {
   SidebarPlanCardProps,
   SidebarProps,
   SidebarRailItemProps,
+  SidebarSize,
+  SidebarSurface,
   SidebarTeam,
   SidebarTeamMenuProps,
   SidebarTree,

package/src/sidebar/metrics.ts

@@ -0,0 +1,70 @@
+import { createContext, useContext } from 'react';
+
+import type { TypeScaleVariant } from '../typography/scale';
+import type { SidebarSize } from './types';
+
+/**
+ * Every measurement a `size` changes, in one table.
+ *
+ * The collapsed width is NOT an independent number: it is the icon square plus
+ * the panel's collapsed padding on both sides plus its two 1px borders, so the
+ * square stays centred whatever the size. Spelling it out here (rather than
+ * deriving it at render) keeps one place to read the rail's real width from —
+ * a shell that reserves space for it needs the number, not the formula.
+ */
+export interface SidebarMetrics {
+  /** The expanded panel's width. */
+  expanded: number;
+  /** The collapsed rail's width: `square + 2 × collapsedPaddingX + 2px border`. */
+  collapsed: number;
+  /** The panel's inset while expanded. */
+  padding: number;
+  /** The panel's horizontal inset while collapsed. */
+  collapsedPaddingX: number;
+  row: {
+    /** The row's own inset — its height is this twice, plus the taller of icon and label. */
+    padding: number;
+    /** Between the glyph and the label. */
+    gap: number;
+    /** The glyph's box. */
+    icon: number;
+    /** The collapsed row: a square of exactly this side. */
+    square: number;
+    label: TypeScaleVariant;
+  };
+}
+
+const COLLAPSED_PADDING_X = 7;
+
+function size(expanded: number, padding: number, icon: number, label: TypeScaleVariant): SidebarMetrics {
+  const square = icon + padding * 2;
+  return {
+    expanded,
+    collapsed: square + COLLAPSED_PADDING_X * 2 + 2,
+    padding: 12,
+    collapsedPaddingX: COLLAPSED_PADDING_X,
+    row: { padding, gap: 8, icon, square, label },
+  };
+}
+
+/**
+ * The three row sizes. `medium` is what this sidebar has always drawn, to the
+ * pixel — 260 expanded, 52 collapsed, a 36px square, a 20px glyph and a
+ * `body-medium` label.
+ */
+export const SIDEBAR_METRICS: Record<SidebarSize, SidebarMetrics> = {
+  small: size(232, 6, 18, 'body-2-medium'),
+  medium: size(260, 8, 20, 'body-medium'),
+  large: size(300, 10, 24, 'title-3-medium'),
+};
+
+const SizeContext = createContext<SidebarSize>('medium');
+
+/** A `Sidebar` publishes its size so a row inside it does not take one. */
+export const SidebarSizeProvider = SizeContext.Provider;
+
+/** The enclosing sidebar's size, or the row's own when it names one. */
+export function useSidebarMetrics(own?: SidebarSize): SidebarMetrics {
+  const inherited = useContext(SizeContext);
+  return SIDEBAR_METRICS[own ?? inherited];
+}

package/src/sidebar/palette.ts

@@ -2,6 +2,8 @@ import { useMemo } from 'react';
 
 import { ACCENT_TABLE, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
 import { MENU_SHADOW } from '../floating/menu-palette';
+import { PANEL_SHADOW, resolvePanelChrome } from '../styles/panel-chrome';
+import { hairlineOn } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { parseRgba } from '../theme/color-utils';
@@ -37,6 +39,13 @@ export interface SidebarPalette {
   panel: string;
   panelBorder: string;
   panelShadow: string;
+  /**
+   * The DOCKED column's single edge. Not `panelBorder`: that one is white in
+   * light mode — a highlight that reads as an edge only because the card's
+   * shadow sits under it. A docked column has no shadow, so its line has to be
+   * a real hairline against both the panel fill and the page (`hairlineOn`).
+   */
+  dockedEdge: string;
   flat: string;
   rowHover: string;
   tertiary: string;
@@ -70,10 +79,12 @@ export interface SidebarPalette {
 }
 
 /** `shadow-sidebar`, light and dark. */
-export const SIDEBAR_SHADOW = {
-  light: '0 1px 0 0 rgba(0, 0, 0, 0.0196), 0 1px 12px 0 rgba(0, 0, 0, 0.0588), 0 0 1px 0 rgba(0, 0, 0, 0.3216)',
-  dark: '0 1px 0 0 rgba(0, 0, 0, 0.1), 0 1px 12px 0 rgba(0, 0, 0, 0.16), 0 0 1px 0 rgba(0, 0, 0, 0.42)',
-} as const;
+/**
+ * The panel edge, now shared with the framed `ContentPanel` — see
+ * `styles/panel-chrome.ts`. Kept exported under its own name because it is
+ * public API of this family.
+ */
+export const SIDEBAR_SHADOW = PANEL_SHADOW;
 
 /** Tailwind `pink-500` sits this far round the OKLCH hue wheel from `blue-500`. */
 const PINK_HUE_OFFSET = 354.308 - 259.815;
@@ -90,12 +101,14 @@ export function resolveSidebarPalette(theme: Theme): SidebarPalette {
   const success = colorRamp(theme.colors.success, ACCENT_TABLE);
   const pink = colorRamp(rotateHue(theme.colors.primary, PINK_HUE_OFFSET), ACCENT_TABLE);
   const dark = theme.isDark;
-  const panel = dark ? n[900] : n[100];
+  const chrome = resolvePanelChrome(theme);
+  const panel = chrome.surface;
   const card = theme.colors.card;
   return {
     panel,
-    panelBorder: dark ? n[800] : card,
-    panelShadow: dark ? SIDEBAR_SHADOW.dark : SIDEBAR_SHADOW.light,
+    panelBorder: chrome.border,
+    panelShadow: chrome.shadow,
+    dockedEdge: hairlineOn(theme, panel),
     // `neutral-925` (#121212), between the 900 and 950 stops.
     flat: dark ? mixColor(n[900], n[950], 0.4) : card,
     rowHover: dark ? n[800] : n[200],

package/src/sidebar/types.ts

@@ -1,8 +1,10 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /** A Remix-style icon: `width` / `height` / `fill`. */
-export type SidebarIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type SidebarIcon = BloomIconComponent;
 
 /**
  * The avatar tints for initials: `neutral`, `blue` (the accent ramp),
@@ -60,6 +62,11 @@ export interface SidebarModeSwitcherProps {
 export interface SidebarItemProps {
   icon: SidebarIcon;
   label: string;
+  /**
+   * The row's size. Inside a `Sidebar` it is inherited from the panel — pass
+   * it only for a row standing on its own.
+   */
+  size?: SidebarSize;
   href?: string;
   badge?: ReactNode;
   selected?: boolean;
@@ -92,6 +99,33 @@ export interface SidebarRailItemProps {
  */
 export type SidebarVariant = 'panel' | 'rail';
 
+/**
+ * The panel's own SURFACE — what the sidebar looks like as an object on the
+ * page, independent of what it contains. It is the axis two apps differ on
+ * most: the same rows read as a different product behind a different edge.
+ *
+ * - `card` (default) the floating panel: radius 24, a hairline and the panel
+ *   shadow, on the panel fill. A sidebar that sits IN the page.
+ * - `plain` no edge at all — no radius, no border, no shadow: the rows sit
+ *   straight on the page. The social/reader look, and what a revealed mobile
+ *   drawer uses.
+ * - `docked` a column flush to the window's edge: no radius, one hairline on
+ *   the INNER edge only, the panel fill, and it stretches the full height.
+ *   The workspace look (a channel list, a file tree).
+ */
+export type SidebarSurface = 'card' | 'plain' | 'docked';
+
+/**
+ * How big the rows are, and with them the panel. One axis, three rungs, every
+ * measurement in `SIDEBAR_METRICS`:
+ *
+ * - `small`  a 30px square, an 18px glyph, `body-2-medium`; 232 expanded, 46 collapsed
+ * - `medium` (default) 36 / 20 / `body-medium`; 260 expanded, 52 collapsed
+ * - `large`  44 / 24 / `title-3-medium`; 300 expanded, 60 collapsed — the
+ *   destination-first rail a social app reads with at arm's length
+ */
+export type SidebarSize = 'small' | 'medium' | 'large';
+
 /** A row in the team menu. */
 export interface SidebarMenuItem {
   key: string;
@@ -224,10 +258,12 @@ export interface SidebarProps {
   /** Rendered inside a mobile drawer: always expanded, close button instead of collapse. */
   mobile?: boolean;
   onClose?: () => void;
-  /** Expanded width fills the container instead of 260px (collapsed stays 60). */
+  /** Expanded width fills the container instead of the size's own width. */
   fluid?: boolean;
-  /** Removes the floating panel treatment (a sidebar revealed beneath mobile content). */
-  flat?: boolean;
+  /** The panel's edge. Defaults to `card`. */
+  surface?: SidebarSurface;
+  /** The row size, and the panel width that follows it. Defaults to `medium`. */
+  size?: SidebarSize;
 
   /** Shows `ThemeToggle` above the secondary rows. Defaults to true. */
   showThemeToggle?: boolean;

package/src/slider/Slider.tsx

@@ -12,18 +12,17 @@ import { useTheme } from '../theme/use-theme';
 import { withAlpha } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import { Text } from '../typography';
-import { borderRadius } from '../styles/tokens';
+import { borderRadius, DISABLED_OPACITY } from '../styles/tokens';
+import { useRingOffsetStyle } from '../styles/surface-levels';
+import { focusRingShadow } from '../styles/interactive-web-css';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
+import { clamp } from '../styles/clamp';
 import { BUTTON_SHADOW, mixColor, resolveButtonRamps } from '../button/shared';
-import { FOCUS_RING_OFFSET_COLOR, webDataSet } from '../checkbox/shared';
 import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
 import type { RangeSliderProps, SliderProps } from './types';
 
-function clamp(v: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, v));
-}
-
 function quantize(raw: number, min: number, max: number, step: number): number {
   if (step <= 0) return clamp(raw, min, max);
   const steps = Math.round((raw - min) / step);
@@ -146,7 +145,7 @@ ${THUMB} {
   cursor: grabbing;
 }
 ${THUMB}:focus-visible:not([data-bloom-slider-pointer="true"]) {
-  box-shadow: 0 0 0 2px ${FOCUS_RING_OFFSET_COLOR}, 0 0 0 4px var(--bloom-slider-ring, currentColor), var(--bloom-slider-shadow) !important;
+  box-shadow: ${focusRingShadow('--bloom-slider-ring', {}, 'var(--bloom-slider-shadow)')} !important;
 }
 @media (prefers-reduced-motion: reduce) {
 ${THUMB}, ${THUMB} * {
@@ -200,6 +199,7 @@ function SliderBase({
   testID,
 }: SliderBaseProps) {
   const theme = useTheme();
+  const ringOffset = useRingOffsetStyle();
   React.useEffect(() => {
     adoptStyleSheet(STYLE_ID, BLOOM_SLIDER_CSS);
   }, []);
@@ -387,7 +387,7 @@ function SliderBase({
           minWidth: 0,
           flexDirection: 'column',
           gap: 8,
-          opacity: disabled ? 0.5 : 1,
+          opacity: disabled ? DISABLED_OPACITY : 1,
         },
         style,
       ]}
@@ -515,6 +515,7 @@ function SliderBase({
             justifyContent: 'center',
             zIndex: dragging ? 20 : 1,
             '--bloom-slider-ring': paint.ring,
+            ...ringOffset,
             '--bloom-slider-shadow': shadow,
             ...webTransition('box-shadow, border-color'),
           };