@oxy.so/bloom 4.0.0 → 4.2.0

package/src/shipment-request/types.ts

@@ -0,0 +1,235 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { PriceSummaryProps } from '../price-breakdown';
+import type { RouteStopsProps } from '../route-stops';
+import type { SortablePhotoGridProps } from '../sortable-media';
+
+/**
+ * What is being moved.
+ *
+ * Five kinds, because they are the five that change how a job is PRICED and
+ * carried, not because they are a taxonomy of objects: an envelope goes on a
+ * bike, furniture needs two people, a pallet needs a tail lift, food needs to
+ * arrive warm. "Other" is deliberately absent — a marketplace that cannot name
+ * what it is carrying cannot quote it, and the free-text `notes` is where an
+ * unusual load is described.
+ */
+export type ShipmentLoadKind = 'parcel' | 'furniture' | 'pallet' | 'envelope' | 'food';
+
+/** How big it is, as the four rungs a carrier prices in. */
+export type ShipmentLoadSize = 'small' | 'medium' | 'large' | 'extraLarge';
+
+/** Which end of the job an access answer is about. */
+export type ShipmentAccess = 'ground' | 'stairs' | 'lift';
+
+export interface ShipmentLoadKindOption {
+  value: ShipmentLoadKind;
+  /** "Parcel", "Furniture". */
+  label: string;
+  /** One line under it — "A box, a bag, anything that fits in one pair of hands." */
+  description?: string;
+  icon?: BloomIconComponent;
+  disabled?: boolean;
+}
+
+export interface ShipmentLoadSizeOption {
+  value: ShipmentLoadSize;
+  /** The segment's word — "S", "M", "L", "XL". */
+  label: string;
+  /** A line under the control naming what the CHOSEN size means. */
+  detail?: string;
+  disabled?: boolean;
+}
+
+/** The job's load, as one value a form owns. */
+export interface ShipmentLoad {
+  /** What it is. `null` while nothing has been chosen. */
+  kind: ShipmentLoadKind | null;
+  /** How big. `null` while nothing has been chosen. */
+  size: ShipmentLoadSize | null;
+  /**
+   * How heavy, as TYPED TEXT with its unit stripped: `"18"`. The picker keeps
+   * digits and one separator and nothing else; the unit is drawn beside the
+   * field and never stored in the value, so an app parses one number rather
+   * than a sentence.
+   */
+  weight: string;
+  /** How many of them. At least 1. */
+  quantity: number;
+  /** Anything the pickers cannot say. */
+  notes?: string;
+}
+
+/** The picker's copy, all of it localisable. */
+export interface ShipmentLoadPickerLabels {
+  /** Over the kind cards. Default `"What are we moving?"`. */
+  kind?: string;
+  /** Over the size control. Default `"Size"`. */
+  size?: string;
+  /** The weight field. Default `"Weight"`. */
+  weight?: string;
+  /** Drawn inside the weight field, after the number. Default `"kg"`. */
+  weightUnit?: string;
+  /** The quantity stepper. Default `"How many"`. */
+  quantity?: string;
+  /** The stepper's value. Default `` (n) => n === 1 ? '1 item' : `${n} items` ``. */
+  quantityValue?: (quantity: number) => string;
+  /** The notes field. Default `"Anything else the carrier should know?"`. */
+  notes?: string;
+  /** The notes placeholder. Default `"Fragile, a lift code, where to leave it…"`. */
+  notesPlaceholder?: string;
+}
+
+/** Validation, keyed by the field it belongs under. The app owns every message. */
+export interface ShipmentLoadErrors {
+  kind?: string;
+  size?: string;
+  weight?: string;
+  quantity?: string;
+}
+
+export interface ShipmentLoadPickerProps {
+  /** The load. Fully controlled — the picker keeps no value of its own. */
+  value: ShipmentLoad;
+  /** Called with the WHOLE next load, never a patch. */
+  onValueChange: (value: ShipmentLoad) => void;
+  /** The kinds, in the order they are drawn. Default {@link SHIPMENT_LOAD_KINDS}. */
+  kinds?: readonly ShipmentLoadKindOption[];
+  /** The sizes. Default {@link SHIPMENT_LOAD_SIZES}. */
+  sizes?: readonly ShipmentLoadSizeOption[];
+  /** Draws the notes field. Default `false`. */
+  notes?: boolean;
+  /** The most the stepper goes to. Default `20`. */
+  maxQuantity?: number;
+  errors?: ShipmentLoadErrors;
+  labels?: ShipmentLoadPickerLabels;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * One thing a requester can add to a job that changes what it costs.
+ *
+ * It is a SWITCH, not a chip: each extra is independent of the others, and a
+ * price beside it is what makes the switch worth flipping.
+ */
+export interface ShipmentExtra {
+  /** Identifies the extra to `onExtrasChange`, and keys the row. */
+  key: string;
+  /** "Help loading", "Insurance". */
+  title: string;
+  /** One line under it — "Two people at both ends." */
+  description?: string;
+  icon?: BloomIconComponent;
+  /**
+   * What it adds, PRE-FORMATTED: `"+€12.00"`, `"Included"`. Drawn at the end of
+   * the row. Nothing here adds it to anything.
+   */
+  price?: string;
+  disabled?: boolean;
+}
+
+export interface ShipmentAccessOption {
+  value: ShipmentAccess;
+  /** "Ground floor", "Stairs", "Lift". */
+  label: string;
+  icon?: BloomIconComponent;
+  /** What it adds, PRE-FORMATTED. Drawn after the label. */
+  price?: string;
+  disabled?: boolean;
+}
+
+export interface ShipmentTimeWindow {
+  /** Identifies the window to `onWindowChange`, and keys the chip. */
+  id: string;
+  /** "Today, 14:00–16:00", "Tomorrow morning". */
+  label: string;
+  /** What it adds, PRE-FORMATTED. Drawn after the label. */
+  price?: string;
+  disabled?: boolean;
+}
+
+/** The options list's copy. */
+export interface ShipmentOptionsLabels {
+  /** Over the switch rows. Default `"Extras"`. */
+  extras?: string;
+  /** Over the access chips. Default `"Access at both ends"`. */
+  access?: string;
+  /** Over the time windows. Default `"When should it be collected?"`. */
+  window?: string;
+}
+
+export interface ShipmentOptionsListProps {
+  /** The independent extras, as switch rows. */
+  extras?: readonly ShipmentExtra[];
+  /** The keys of the extras that are on. */
+  selectedExtras?: readonly string[];
+  onExtrasChange?: (keys: string[]) => void;
+  /** The access answers — a single choice, because one of them is true. */
+  accessOptions?: readonly ShipmentAccessOption[];
+  access?: ShipmentAccess | null;
+  onAccessChange?: (access: ShipmentAccess) => void;
+  /** The collection windows — a single choice. */
+  windows?: readonly ShipmentTimeWindow[];
+  window?: string | null;
+  onWindowChange?: (id: string) => void;
+  labels?: ShipmentOptionsLabels;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** The form's section headings. */
+export interface ShipmentRequestFormLabels {
+  route?: string;
+  routeDescription?: string;
+  load?: string;
+  loadDescription?: string;
+  photos?: string;
+  photosDescription?: string;
+  options?: string;
+  optionsDescription?: string;
+  price?: string;
+  priceDescription?: string;
+}
+
+export interface ShipmentRequestFormProps {
+  /**
+   * The pickup and the drop-off, handed to `RouteStops` UNCHANGED.
+   *
+   * The form does not draw a second route: there is one component in Bloom that
+   * knows what an origin, a destination and the stops between them look like,
+   * and a form that redrew it would be a copy that drifts.
+   */
+  route: RouteStopsProps;
+  /** The load section. */
+  load: ShipmentLoad;
+  onLoadChange: (load: ShipmentLoad) => void;
+  /** Everything else `ShipmentLoadPicker` takes, minus the value pair. */
+  loadProps?: Omit<ShipmentLoadPickerProps, 'value' | 'onValueChange' | 'style' | 'testID'>;
+  /**
+   * The photos, handed to `SortablePhotoGrid` unchanged. Without it the photos
+   * section is not drawn — a job that needs no picture should not be asked for
+   * one.
+   */
+  photos?: Omit<SortablePhotoGridProps, 'style' | 'testID'>;
+  /** The options section. Without it the section is not drawn. */
+  options?: Omit<ShipmentOptionsListProps, 'style' | 'testID'>;
+  /**
+   * The running price, handed to `PriceSummary` unchanged. It sits last, so the
+   * options above it and the number they move are on the same screen.
+   */
+  price?: Omit<PriceSummaryProps, 'style' | 'testID'>;
+  /** The submit row, drawn under the last section with no divider over it. */
+  footer?: ReactNode;
+  labels?: ShipmentRequestFormLabels;
+  /** Dims and stops every control in the form. */
+  disabled?: boolean;
+  /** Names the form. Default `"Shipment request"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/sidebar/Sidebar.tsx

@@ -28,6 +28,7 @@ import { Z_INDEX } from '../styles/z-index';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { ThemeToggle } from '../theme-toggle';
 import { Text, TYPE_SCALE } from '../typography';
+import { resolveSidebarGeometry, SidebarGeometryProvider } from './geometry';
 import { SidebarSizeProvider, SIDEBAR_METRICS } from './metrics';
 import { useSidebarPalette, type SidebarPalette } from './palette';
 import { Collapsible, CollapseProvider, IS_WEB, MORPH_MS, useSidebarWebCss } from './parts';
@@ -35,6 +36,7 @@ import { SidebarFolder } from './SidebarFolder';
 import { SidebarItem } from './SidebarItem';
 import { SidebarModeSwitcher } from './SidebarModeSwitcher';
 import { SidebarPlanCard } from './SidebarPlanCard';
+import { SidebarPrimaryAction } from './SidebarPrimaryAction';
 import { SidebarRail } from './SidebarRail';
 import { SidebarScrollArea } from './SidebarScrollArea';
 import { SidebarTeamMenu } from './SidebarTeamMenu';
@@ -138,6 +140,8 @@ function SearchField({
 
 const SidebarPanel: React.FC<SidebarProps> = ({
   items = [],
+  primaryAction,
+  footer,
   secondaryItems = [],
   modes,
   mode,
@@ -206,7 +210,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
 
   // `fluid` fills its container while expanded; the morph needs a number, so
   // the last expanded width is measured. The collapsed end is the size's own.
-  const collapsedWidth = metrics.collapsed;
+  const geometry = useMemo(() => resolveSidebarGeometry(metrics, surface, Boolean(primaryAction), Boolean(tree)), [metrics, surface, primaryAction, tree]);
+  const { collapsedWidth, collapsedLane, expandedInset } = geometry;
   const expandedWidth = useSharedValue(metrics.expanded);
   useEffect(() => {
     if (!fluid) expandedWidth.value = metrics.expanded;
@@ -228,9 +233,15 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     };
   }, [progress, expandedWidth, fluid, collapsedWidth, expandedPadding, collapsedPadding]);
   const navInset = useAnimatedStyle(() => {
-    const inset = 2 * (1 - progress.value);
+    const inset = expandedInset * (1 - progress.value);
     return { paddingLeft: inset, paddingRight: inset };
-  }, [progress]);
+  }, [progress, expandedInset]);
+  const searchInset = useAnimatedStyle(() => {
+    const start = metrics.row.padding + expandedInset;
+    const end = metrics.row.padding;
+    const padding = start + (end - start) * progress.value;
+    return { paddingLeft: padding, paddingRight: padding, marginLeft: (collapsedLane - metrics.row.square) / 2 * progress.value, marginRight: (collapsedLane - metrics.row.square) / 2 * progress.value };
+  }, [progress, metrics.row.square, metrics.row.padding, metrics.row.icon, expandedInset, collapsedLane]);
   const sideBarIconStyle = useAnimatedStyle(
     () => ({ transform: [{ scaleX: 2 * progress.value - 1 }] }),
     [progress],
@@ -249,11 +260,11 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     const p = progress.value;
     return {
       left: `${100 * (1 - p)}%` as `${number}%`,
-      width: 20 + 16 * p,
+      width: 20 + (collapsedLane - 20) * p,
       top: hasLogo ? 8 + 38 * p : hasAccount ? 6 * (1 - p) : 0,
       transform: [{ translateX: -20 * (1 - p) }],
     };
-  }, [progress, hasLogo, hasAccount]);
+  }, [progress, hasLogo, hasAccount, collapsedLane]);
   const themeGeometry = useAnimatedStyle(() => ({ height: 40 - 4 * progress.value }), [progress]);
   const themeExpandedStyle = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const themeCollapsedStyle = useAnimatedStyle(() => ({ opacity: progress.value }), [progress]);
@@ -328,6 +339,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         selected={isSelected}
         collapsed={collapsed}
         onPress={pressFor(item)}
+        onLongPress={item.onLongPress}
         testID={`sidebar-item-${item.key}`}
         badge={
           item.badge !== undefined ? (
@@ -376,7 +388,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     setSuppressUserHover(expanding);
   };
 
-  const headerControl = flatMobile ? (
+  const headerControl = flatMobile && showSearch ? (
     <View
       ref={searchFieldRef}
       style={{
@@ -482,12 +494,14 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         {
           flexDirection: 'row',
           alignItems: 'center',
-          padding: metrics.row.padding,
+          height: metrics.row.square,
+          paddingTop: metrics.row.padding,
+          paddingBottom: metrics.row.padding,
           overflow: 'hidden',
           borderRadius: borderRadius.full,
           backgroundColor: searchHover.state ? palette.searchHover : palette.tertiary,
           '--bloom-sidebar-ring': palette.ring,
-        } as WebCssStyle, searchGapStyle,
+        } as WebCssStyle, searchGapStyle, searchInset,
       ]}
       testID="sidebar-search"
     >
@@ -587,6 +601,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
 
   return (
     <SidebarSizeProvider value={size}>
+    <SidebarGeometryProvider value={geometry}>
     <CollapseProvider value={progress}>
       <Animated.View
         role="complementary"
@@ -654,6 +669,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
               <Text variant="body-regular" style={{ paddingLeft: 8, paddingRight: 8, color: palette.textTertiary }}>{noResultsLabel}</Text>
             ) : null}
           </SidebarScrollArea>
+          {primaryAction ? <SidebarPrimaryAction action={primaryAction} collapsed={collapsed} testID={testID ? `${testID}-primary-action` : undefined} /> : null}
         </View>
 
         <View style={{ width: '100%', flexShrink: 0, gap: 12, paddingTop: hasTree ? 12 : 0 }}>
@@ -666,15 +682,15 @@ const SidebarPanel: React.FC<SidebarProps> = ({
               </Animated.View>
               <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} aria-hidden={!collapsed} accessibilityElementsHidden={!collapsed} importantForAccessibility={collapsed ? 'auto' : 'no-hide-descendants'}
                 {...(IS_WEB && !collapsed ? { inert: true } : {})}
-                style={[{ position: 'absolute', left: 0, top: 0 }, themeCollapsedStyle]}>
-                <ThemeToggle collapsed />
+                style={[{ position: 'absolute', left: 0, right: 0, top: 0 }, themeCollapsedStyle]}>
+                <ThemeToggle collapsed style={{ alignSelf: 'center' }} />
               </Animated.View>
             </Animated.View>
           ) : null}
           {shownSecondary.length > 0 ? (
-            <View role="navigation" style={{ width: '100%', gap: 4 }}>
+            <Animated.View role="navigation" style={[{ width: '100%', gap: 4 }, navInset]}>
               {shownSecondary.map(renderRow)}
-            </View>
+            </Animated.View>
           ) : null}
           {plan ? (
             <SidebarPlanCard
@@ -691,9 +707,13 @@ const SidebarPanel: React.FC<SidebarProps> = ({
               testID="sidebar-team"
             />
           ) : null}
+          {footer != null ? <View testID={testID ? `${testID}-footer` : 'sidebar-footer'} style={{ width: '100%', flexShrink: 0 }}>
+            {typeof footer === 'function' ? footer({ collapsed }) : footer}
+          </View> : null}
         </View>
       </Animated.View>
     </CollapseProvider>
+    </SidebarGeometryProvider>
     </SidebarSizeProvider>
   );
 };

package/src/sidebar/SidebarItem.tsx

@@ -5,6 +5,7 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
+import { useSidebarGeometry } from './geometry';
 import { useSidebarMetrics } from './metrics';
 import { useSidebarPalette } from './palette';
 import { borderRadius } from '../styles/tokens';
@@ -25,6 +26,8 @@ import type { SidebarItemProps } from './types';
  * The label and badge sit in collapse slots, so the icon stays pinned while the
  * rail morphs. With `href` the row is a link (a real anchor on web).
  */
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 const SidebarItemComponent: React.FC<SidebarItemProps> = ({
   icon: Icon,
   label,
@@ -34,6 +37,7 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
   selected = false,
   collapsed = false,
   onPress,
+  onLongPress,
   style,
   testID,
 }) => {
@@ -43,6 +47,11 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
   const { state: hovered, onIn, onOut } = useInteractionState();
   const inSidebar = useInSidebar();
   const progress = useSidebarCollapseProgress(collapsed);
+  const lane = useSidebarGeometry()?.collapsedLane ?? metrics.row.square;
+  const horizontalInset = useAnimatedStyle(() => {
+    const margin = (lane - metrics.row.square) / 2 * progress.value;
+    return { marginLeft: margin, marginRight: margin };
+  }, [progress, lane, metrics.row.square]);
   const itemGap = metrics.row.gap;
   const contentStyle = useAnimatedStyle(() => ({ gap: itemGap * (1 - progress.value) }), [progress, itemGap]);
   const foreground = selected ? palette.selectedForeground : palette.textSecondary;
@@ -52,7 +61,11 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
     alignItems: 'center',
     justifyContent: 'space-between',
     overflow: 'hidden',
-    padding: metrics.row.padding,
+    height: metrics.row.square,
+    paddingLeft: metrics.row.padding,
+    paddingRight: metrics.row.padding,
+    paddingTop: metrics.row.padding,
+    paddingBottom: metrics.row.padding,
     borderRadius: borderRadius.full,
     // 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,
@@ -73,20 +86,21 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
     : {};
 
   return (
-    <Pressable
+    <AnimatedPressable
       {...webProps}
       role={href ? 'link' : 'button'}
       accessibilityLabel={label}
       accessibilityState={{ selected }}
       onHoverIn={onIn}
       onHoverOut={onOut}
+      onLongPress={onLongPress}
       onPress={(event: GestureResponderEvent) => {
         if (!onPress) return;
         // The host navigates (a router, or an action like opening Settings).
         if (IS_WEB && href) event.preventDefault();
         onPress();
       }}
-      style={[rowStyle, style]}
+      style={[rowStyle, horizontalInset, style]}
       testID={testID}
     >
       <Animated.View style={[{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1 }, contentStyle]}>
@@ -100,7 +114,7 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
         </Collapsible>
       </Animated.View>
       {badge != null ? <Collapsible collapsed={collapsed}>{badge}</Collapsible> : null}
-    </Pressable>
+    </AnimatedPressable>
   );
 };
 

package/src/sidebar/SidebarLogoView.tsx

@@ -1,10 +1,12 @@
 import React, { memo } from 'react';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { useSidebarGeometry } from './geometry';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
 
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
 import { useSidebarPalette } from './palette';
-import { Collapsible, IS_WEB, useSidebarWebCss } from './parts';
+import { Collapsible, IS_WEB, useSidebarCollapseProgress, useSidebarWebCss } from './parts';
 import type { SidebarLogoViewProps } from './types';
 
 /** The mark's box: the collapsed column's width, and the header row's height. */
@@ -30,6 +32,11 @@ const SidebarLogoViewComponent: React.FC<SidebarLogoViewProps> = ({
   testID,
 }) => {
   const palette = useSidebarPalette();
+  const geometry = useSidebarGeometry();
+  const progress = useSidebarCollapseProgress(collapsed);
+  const expandedLane = geometry?.expandedLane ?? SIDEBAR_LOGO_SIZE;
+  const collapsedLane = geometry?.collapsedLane ?? SIDEBAR_LOGO_SIZE;
+  const markStyle = useAnimatedStyle(() => ({ width: expandedLane + (collapsedLane - expandedLane) * progress.value }), [progress, expandedLane, collapsedLane]);
   useSidebarWebCss();
   const { icon, wordmark, href, onPress, accessibilityLabel } = logo;
   const label = accessibilityLabel ?? (typeof wordmark === 'string' ? wordmark : undefined);
@@ -37,12 +44,12 @@ const SidebarLogoViewComponent: React.FC<SidebarLogoViewProps> = ({
   const content = (
     <View style={{ flexDirection: 'row', alignItems: 'center', minWidth: 0 }}>
       {icon != null ? (
-        <View
-          style={{ width: SIDEBAR_LOGO_SIZE, height: SIDEBAR_LOGO_SIZE, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
+        <Animated.View
+          style={[{ height: SIDEBAR_LOGO_SIZE, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }, markStyle]}
           testID={testID ? `${testID}-icon` : undefined}
         >
           {icon}
-        </View>
+        </Animated.View>
       ) : null}
       {wordmark != null && showWordmark ? (
         <Collapsible collapsed={collapsed}>

package/src/sidebar/SidebarModeSwitcher.tsx

@@ -15,6 +15,7 @@ import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
 import { useSidebarPalette } from './palette';
+import { useSidebarGeometry } from './geometry';
 import { useSidebarMetrics } from './metrics';
 import { Collapsible, IS_WEB, useInSidebar, useSidebarCollapseProgress, useSidebarWebCss, webHook } from './parts';
 import type { SidebarMode, SidebarModeSwitcherProps } from './types';
@@ -48,6 +49,8 @@ function ModeRow({
   progress,
   compactSquare,
   compactIcon,
+  expandedLane,
+  collapsedLane,
   onSelect,
   testID,
 }: {
@@ -57,6 +60,8 @@ function ModeRow({
   progress: SharedValue<number>;
   compactSquare: number;
   compactIcon: number;
+  expandedLane: number;
+  collapsedLane: number;
   onSelect: (key: string) => void;
   testID?: string;
 }) {
@@ -68,11 +73,13 @@ function ModeRow({
   const geometry = useAnimatedStyle(() => ({
     height: ROW_HEIGHT + (compactSquare - ROW_HEIGHT) * progress.value,
     gap: 4 * (1 - progress.value),
-  }), [progress, compactSquare]);
+    marginLeft: (collapsedLane - compactSquare) / 2 * progress.value,
+    marginRight: (collapsedLane - compactSquare) / 2 * progress.value,
+  }), [progress, compactSquare, collapsedLane]);
   const iconBox = useAnimatedStyle(() => {
     const side = ROW_HEIGHT + (compactSquare - ROW_HEIGHT) * progress.value;
-    return { width: side, height: side };
-  }, [progress, compactSquare]);
+    return { width: expandedLane + (compactSquare - expandedLane) * progress.value, height: side };
+  }, [progress, compactSquare, expandedLane, collapsedLane]);
   const glyphStyle = useAnimatedStyle(() => ({
     transform: [{ scale: 1 + (compactIcon / 18 - 1) * progress.value }],
   }), [progress, compactIcon]);
@@ -136,6 +143,9 @@ const SidebarModeSwitcherComponent: React.FC<SidebarModeSwitcherProps> = ({
   const metrics = useSidebarMetrics();
   const progress = useSidebarCollapseProgress(collapsed);
   const inSidebar = useInSidebar();
+  const geometry = useSidebarGeometry();
+  const expandedLane = geometry ? geometry.expandedLane - PADDING * 2 : ROW_HEIGHT;
+  const collapsedLane = geometry?.collapsedLane ?? metrics.row.square;
   const compactSquare = metrics.row.square;
   const compactIcon = metrics.row.icon;
   // Grow into the panel inset continuously while its content column narrows.
@@ -156,8 +166,8 @@ const SidebarModeSwitcherComponent: React.FC<SidebarModeSwitcherProps> = ({
   }, [index, reducedMotion, selectedPosition]);
   const thumbStyle = useAnimatedStyle(() => {
     const height = ROW_HEIGHT + (compactSquare - ROW_HEIGHT) * progress.value;
-    return { height, transform: [{ translateY: selectedPosition.value * (height + ROW_GAP) }] };
-  }, [progress, compactSquare, selectedPosition]);
+    return { height, left: PADDING + (collapsedLane - compactSquare) / 2 * progress.value, right: PADDING + (collapsedLane - compactSquare) / 2 * progress.value, transform: [{ translateY: selectedPosition.value * (height + ROW_GAP) }] };
+  }, [progress, compactSquare, selectedPosition, collapsedLane]);
 
   return (
     <Animated.View
@@ -205,6 +215,8 @@ const SidebarModeSwitcherComponent: React.FC<SidebarModeSwitcherProps> = ({
           progress={progress}
           compactSquare={compactSquare}
           compactIcon={compactIcon}
+          expandedLane={expandedLane}
+          collapsedLane={collapsedLane}
           onSelect={onValueChange}
           testID={testID ? `${testID}-${mode.key}` : undefined}
         />

package/src/sidebar/SidebarPlanCard.tsx

@@ -5,6 +5,7 @@ import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanima
 import { Button } from '../button';
 import { borderRadius } from '../styles/tokens';
 import { Text } from '../typography';
+import { useSidebarGeometry } from './geometry';
 import { useSidebarPalette } from './palette';
 import { Collapsible, IS_WEB, SidebarAvatarView, useSidebarCollapseProgress, useInSidebar } from './parts';
 import type { SidebarPlanCardProps } from './types';
@@ -24,13 +25,15 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
   const palette = useSidebarPalette();
   const progress = useSidebarCollapseProgress(collapsed);
   const inSidebar = useInSidebar();
+  const lane = useSidebarGeometry();
+  const compactPadding = lane ? Math.max(0, (lane.collapsedLane - 32) / 2) : 2;
   const naturalWidth = useSharedValue(0);
   const geometry = useAnimatedStyle(() => ({
     width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * progress.value : progress.value === 1 ? 36 : '100%',
     height: 56 - 20 * progress.value,
-    paddingLeft: 10 - 8 * progress.value,
-    paddingRight: 12 - 10 * progress.value,
-  }), [progress, inSidebar, naturalWidth]);
+    paddingLeft: 10 + (compactPadding - 10) * progress.value,
+    paddingRight: 12 + (compactPadding - 12) * progress.value,
+  }), [progress, inSidebar, naturalWidth, compactPadding]);
   const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const avatar = plan.avatar ?? { initials: plan.name.slice(0, 1).toUpperCase(), color: 'blue' as const };
 

package/src/sidebar/SidebarPrimaryAction.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Fab } from '../fab';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { SIDEBAR_ACTION_DIAMETER, useSidebarGeometry } from './geometry';
+import { useSidebarCollapseProgress } from './parts';
+import type { SidebarProps } from './types';
+
+/** The sidebar owns placement; Fab owns the extended/collapsed action. */
+export function SidebarPrimaryAction({ action, collapsed = false, rail = false, testID }: {
+  action: NonNullable<SidebarProps['primaryAction']>;
+  collapsed?: boolean;
+  rail?: boolean;
+  testID?: string;
+}) {
+  const geometry = useSidebarGeometry();
+  const progress = useSidebarCollapseProgress(collapsed);
+  const expandedInset = geometry?.expandedInset ?? 0;
+  const inset = useAnimatedStyle(() => ({ paddingLeft: expandedInset * (1 - progress.value), paddingRight: expandedInset * (1 - progress.value) }), [progress, expandedInset]);
+  const diameter = SIDEBAR_ACTION_DIAMETER;
+  return <Animated.View style={[{ flexShrink: 0, width: '100%', paddingTop: 12 }, inset]}>
+    <Fab
+      testID={testID ?? 'sidebar-primary-action'}
+      size="md"
+      icon={action.icon}
+      label={action.label}
+      collapsed={rail || collapsed}
+      disabled={action.disabled}
+      onPress={action.onPress}
+      style={{ width: rail ? diameter : '100%', alignSelf: 'center' }}
+    />
+  </Animated.View>;
+}