@oxy.so/bloom 4.0.0 → 4.1.0

package/src/shipment-request/ShipmentLoadPicker.tsx

@@ -0,0 +1,217 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { useContainerWidth } from '../hooks/use-container-width';
+import { resolveSelectionPaint, SelectionCard } from '../listing-editor/SelectionCard';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { StepperRow } from '../stepper';
+import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel, TextFieldSuffix } from '../text-field';
+import { Textarea } from '../textarea';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { SHIPMENT_LOAD_KINDS, SHIPMENT_LOAD_LABELS, SHIPMENT_LOAD_SIZES, SHIPMENT_REQUEST_GEOMETRY } from './constants';
+import { joinShipmentName, sanitizeWeight } from './shared';
+import type { ShipmentLoadPickerProps, ShipmentLoadSize } from './types';
+
+/**
+ * What is being moved, how big it is, how heavy and how many.
+ *
+ *   kind      the editor's selectable cards, one answer: a 44 icon tile, the
+ *             kind at `headline-semibold`, what it covers under it, a radio
+ *             indicator on the right
+ *   size      a `SegmentedControl` of single letters, with the chosen rung's
+ *             sentence under it — four words never fit in one control at phone
+ *             width, and a control whose every option carries a sentence is a
+ *             list, not a segmented control
+ *   weight    a `TextField` with its unit as a `TextFieldSuffix`, beside the
+ *             quantity from 480 wide and stacked under it below
+ *   quantity  a `StepperRow` from 1
+ *   notes     an auto-resizing `Textarea`, drawn only when asked for
+ *
+ * **THE VALUE IS ONE OBJECT AND IT ARRIVES WHOLE.** `onValueChange` is called
+ * with the next `ShipmentLoad`, never with a patch: a form that merges patches
+ * in four places has four chances to drop a field, and this one has none.
+ *
+ * **THE UNIT IS NOT PART OF THE VALUE.** `weight` holds digits and at most one
+ * dot (`sanitizeWeight`), so an app parses a number; the "kg" beside it is
+ * drawn, announced, and never stored.
+ *
+ * Validation is the app's. `errors` is keyed by field and each message sits
+ * under its own control, in the error colour — the kind's under the cards.
+ */
+
+function ShipmentLoadPickerComponent({
+  value,
+  onValueChange,
+  kinds = SHIPMENT_LOAD_KINDS,
+  sizes = SHIPMENT_LOAD_SIZES,
+  notes = false,
+  maxQuantity = 20,
+  errors = {},
+  labels: labelOverrides,
+  disabled = false,
+  style,
+  testID,
+}: ShipmentLoadPickerProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveSelectionPaint(theme), [theme]);
+  const labels = useMemo(() => ({ ...SHIPMENT_LOAD_LABELS, ...labelOverrides }), [labelOverrides]);
+  const { width, onLayout } = useContainerWidth();
+  const wide = width === null || width >= SHIPMENT_REQUEST_GEOMETRY.narrowWidth;
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  const chosenSize = sizes.find((size) => size.value === value.size);
+
+  return (
+    <View
+      testID={testID}
+      onLayout={onLayout}
+      style={[{ gap: SHIPMENT_REQUEST_GEOMETRY.controlGap }, style]}
+    >
+      <View style={{ gap: 8 }}>
+        <TextFieldLabel>{labels.kind}</TextFieldLabel>
+        <View
+          role="radiogroup"
+          accessibilityLabel={labels.kind}
+          style={{ gap: 12 }}
+          testID={id('kind')}
+        >
+          {kinds.map((kind) => (
+            <SelectionCard
+              key={kind.value}
+              selection="single"
+              selected={value.kind === kind.value}
+              onPress={() => {
+                if (value.kind !== kind.value) onValueChange({ ...value, kind: kind.value });
+              }}
+              title={kind.label}
+              description={kind.description}
+              icon={kind.icon}
+              compact={!wide}
+              disabled={disabled || kind.disabled === true}
+              accessibilityLabel={joinShipmentName([kind.label, kind.description])}
+              testID={id(`kind-${kind.value}`)}
+            />
+          ))}
+        </View>
+        {errors.kind ? (
+          <TextFieldHint isInvalid>{errors.kind}</TextFieldHint>
+        ) : null}
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <TextFieldLabel>{labels.size}</TextFieldLabel>
+        {/* `''` is "nothing chosen yet": the control's value is required, and a
+            sentinel that matches no segment is the honest way to say a
+            single-choice control has not been answered. */}
+        <SegmentedControl<ShipmentLoadSize | ''>
+          type="radio"
+          label={labels.size}
+          value={value.size ?? ''}
+          onValueChange={(size) => {
+            if (size !== '') onValueChange({ ...value, size });
+          }}
+          disabled={disabled}
+          style={{ alignSelf: 'stretch' }}
+          testID={id('size')}
+        >
+          {sizes.map((size) => (
+            <SegmentedControlItem
+              key={size.value}
+              value={size.value}
+              disabled={disabled || size.disabled}
+              accessibilityLabel={joinShipmentName([size.label, size.detail])}
+              testID={id(`size-${size.value}`)}
+            >
+              <SegmentedControlItemText>{size.label}</SegmentedControlItemText>
+            </SegmentedControlItem>
+          ))}
+        </SegmentedControl>
+        {chosenSize?.detail ? (
+          <Text
+            variant="body-2-regular"
+            style={{ color: paint.textSecondary }}
+            testID={id('size-detail')}
+          >
+            {chosenSize.detail}
+          </Text>
+        ) : null}
+        {errors.size ? (
+          <TextFieldHint isInvalid>{errors.size}</TextFieldHint>
+        ) : null}
+      </View>
+
+      <View
+        style={{
+          flexDirection: wide ? 'row' : 'column',
+          // The stepper has no label above it, so on a wide form the two
+          // columns line up on their BOTTOM edge — the field and the counter,
+          // not the field and the word above it.
+          alignItems: wide ? 'flex-end' : 'stretch',
+          gap: SHIPMENT_REQUEST_GEOMETRY.controlGap,
+        }}
+      >
+        <View
+          style={[
+            { gap: 8 },
+            wide ? { width: SHIPMENT_REQUEST_GEOMETRY.weightWidth } : null,
+          ]}
+        >
+          <TextFieldLabel>{labels.weight}</TextFieldLabel>
+          <TextField isInvalid={!!errors.weight} disabled={disabled}>
+            <TextFieldInput
+              label={labels.weight}
+              placeholder={null}
+              value={value.weight}
+              onChangeText={(text) => onValueChange({ ...value, weight: sanitizeWeight(text) })}
+              keyboardType="decimal-pad"
+              inputMode="decimal"
+              isInvalid={!!errors.weight}
+              disabled={disabled}
+              testID={id('weight')}
+            />
+            <TextFieldSuffix label={labels.weightUnit}>{labels.weightUnit}</TextFieldSuffix>
+          </TextField>
+          {errors.weight ? (
+            <TextFieldHint isInvalid>{errors.weight}</TextFieldHint>
+          ) : null}
+        </View>
+
+        <View style={{ flex: wide ? 1 : undefined, minWidth: 0, gap: 8 }}>
+          <StepperRow
+            title={labels.quantity}
+            value={value.quantity}
+            onValueChange={(quantity) => onValueChange({ ...value, quantity })}
+            min={1}
+            max={maxQuantity}
+            formatValue={labels.quantityValue}
+            size="small"
+            disabled={disabled}
+            style={{ paddingTop: 0, paddingBottom: 0 }}
+            testID={id('quantity')}
+          />
+          {errors.quantity ? (
+            <TextFieldHint isInvalid>{errors.quantity}</TextFieldHint>
+          ) : null}
+        </View>
+      </View>
+
+      {notes ? (
+        <Textarea
+          label={labels.notes}
+          placeholder={labels.notesPlaceholder}
+          value={value.notes ?? ''}
+          onChangeText={(text) => onValueChange({ ...value, notes: text })}
+          rows={3}
+          autoResize
+          maxRows={6}
+          disabled={disabled}
+          testID={id('notes')}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export const ShipmentLoadPicker = memo(ShipmentLoadPickerComponent);
+ShipmentLoadPicker.displayName = 'ShipmentLoadPicker';

package/src/shipment-request/ShipmentOptionsList.tsx

@@ -0,0 +1,184 @@
+import React, { memo, useMemo } from 'react';
+import { View, type TextStyle } from 'react-native';
+
+import { Chip } from '../chip';
+import { SettingsListGroup, SettingsListItem } from '../settings-list';
+import { Switch } from '../switch';
+import { TextFieldLabel } from '../text-field';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { SHIPMENT_OPTIONS_LABELS, SHIPMENT_REQUEST_GEOMETRY } from './constants';
+import { joinShipmentName, toggleShipmentExtra } from './shared';
+import type { ShipmentOptionsListProps } from './types';
+
+/**
+ * The answers that change what a job costs.
+ *
+ * Three groups, and the CONTROL is the difference between them:
+ *
+ *   extras  independent of each other, so each is a `SettingsListItem` with a
+ *           `Switch` and its own price at the end of the row. A switch is the
+ *           control for "and also this"
+ *   access  exactly one is true — a place is on the ground, up stairs, or has a
+ *           lift — so they are a `radiogroup` of chips, and choosing one
+ *           unchooses the rest without the user having to
+ *   window  the same, over collection times
+ *
+ * **A PRICE HERE IS A STRING.** `"+€12.00"`, `"Included"` — drawn where the
+ * option is and never added to anything. The running total belongs to
+ * `PriceSummary`, which is what `ShipmentRequestForm` puts under this.
+ *
+ * **A SWITCH DRAWS NO TEXT**, so each one is named with its row's title and its
+ * price: the caption beside a switch is a SIBLING on both platforms, and a
+ * screen reader that reads only the control announces "switch, off".
+ */
+
+const TABULAR: TextStyle = { fontVariant: ['tabular-nums'] };
+
+function ShipmentOptionsListComponent({
+  extras,
+  selectedExtras = [],
+  onExtrasChange,
+  accessOptions,
+  access = null,
+  onAccessChange,
+  windows,
+  window: windowId = null,
+  onWindowChange,
+  labels: labelOverrides,
+  disabled = false,
+  style,
+  testID,
+}: ShipmentOptionsListProps) {
+  const theme = useTheme();
+  const labels = useMemo(() => ({ ...SHIPMENT_OPTIONS_LABELS, ...labelOverrides }), [labelOverrides]);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const chosen = new Set(selectedExtras);
+
+  const priceText = (price: string | undefined) =>
+    price === undefined ? null : (
+      <Text
+        variant="body-2-medium"
+        numberOfLines={1}
+        style={[{ color: theme.colors.textSecondary }, TABULAR]}
+      >
+        {price}
+      </Text>
+    );
+
+  return (
+    <View testID={testID} style={[{ gap: SHIPMENT_REQUEST_GEOMETRY.controlGap }, style]}>
+      {extras?.length ? (
+        <View style={{ gap: 8 }} testID={id('extras')}>
+          <TextFieldLabel>{labels.extras}</TextFieldLabel>
+          <SettingsListGroup>
+            {extras.map((extra) => {
+              const on = chosen.has(extra.key);
+              const blocked = disabled || extra.disabled === true;
+              const name = joinShipmentName([extra.title, extra.description, extra.price]);
+              return (
+                <SettingsListItem
+                  key={extra.key}
+                  icon={
+                    extra.icon ? (
+                      <extra.icon width={20} height={20} fill={theme.colors.text} />
+                    ) : undefined
+                  }
+                  title={extra.title}
+                  description={extra.description}
+                  disabled={blocked}
+                  // The ROW is not the control. A pressable row wrapping a
+                  // switch is two targets for one answer, and on web the outer
+                  // one is a button containing a checkbox.
+                  showChevron={false}
+                  rightElement={
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                      {priceText(extra.price)}
+                      <Switch
+                        checked={on}
+                        onCheckedChange={() =>
+                          onExtrasChange?.(toggleShipmentExtra(extras, selectedExtras, extra.key))
+                        }
+                        disabled={blocked}
+                        accessibilityLabel={name}
+                        testID={id(`extra-${extra.key}`)}
+                      />
+                    </View>
+                  }
+                />
+              );
+            })}
+          </SettingsListGroup>
+        </View>
+      ) : null}
+
+      {accessOptions?.length ? (
+        <View style={{ gap: 8 }}>
+          <TextFieldLabel>{labels.access}</TextFieldLabel>
+          <View
+            role="radiogroup"
+            accessibilityLabel={labels.access}
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: SHIPMENT_REQUEST_GEOMETRY.chipGap,
+            }}
+            testID={id('access')}
+          >
+            {accessOptions.map((option) => (
+              <Chip
+                key={option.value}
+                role="radio"
+                size="xl"
+                variant="outlined"
+                selected={access === option.value}
+                disabled={disabled || option.disabled}
+                leadingIcon={option.icon}
+                onPress={() => onAccessChange?.(option.value)}
+                accessibilityLabel={joinShipmentName([option.label, option.price])}
+                testID={id(`access-${option.value}`)}
+              >
+                {joinShipmentName([option.label, option.price], ' · ')}
+              </Chip>
+            ))}
+          </View>
+        </View>
+      ) : null}
+
+      {windows?.length ? (
+        <View style={{ gap: 8 }}>
+          <TextFieldLabel>{labels.window}</TextFieldLabel>
+          <View
+            role="radiogroup"
+            accessibilityLabel={labels.window}
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: SHIPMENT_REQUEST_GEOMETRY.chipGap,
+            }}
+            testID={id('window')}
+          >
+            {windows.map((option) => (
+              <Chip
+                key={option.id}
+                role="radio"
+                size="xl"
+                variant="outlined"
+                selected={windowId === option.id}
+                disabled={disabled || option.disabled}
+                onPress={() => onWindowChange?.(option.id)}
+                accessibilityLabel={joinShipmentName([option.label, option.price])}
+                testID={id(`window-${option.id}`)}
+              >
+                {joinShipmentName([option.label, option.price], ' · ')}
+              </Chip>
+            ))}
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const ShipmentOptionsList = memo(ShipmentOptionsListComponent);
+ShipmentOptionsList.displayName = 'ShipmentOptionsList';

package/src/shipment-request/ShipmentRequestForm.tsx

@@ -0,0 +1,148 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { PriceSummary } from '../price-breakdown';
+import { RouteStops } from '../route-stops';
+import { SortablePhotoGrid } from '../sortable-media';
+import { FilterSection } from '../stay-filters/FilterSection';
+import { ShipmentLoadPicker } from './ShipmentLoadPicker';
+import { ShipmentOptionsList } from './ShipmentOptionsList';
+import { SHIPMENT_REQUEST_LABELS } from './constants';
+import type { ShipmentRequestFormProps } from './types';
+
+/**
+ * Describing a job: where it goes, what is being moved, what it looks like,
+ * what changes the price, and what that price currently is.
+ *
+ * It is the REGISTER a Bloom multi-part form is written in — one column of
+ * sections, each a heading over its controls with a hairline under it, no card
+ * per section and no step counter. The one decision it makes is the ORDER, and
+ * the order is the order of the questions a carrier needs answered:
+ *
+ *   1  route    `RouteStops` — the origin, the destination, the stops between
+ *   2  load     `ShipmentLoadPicker` — kind, size, weight, quantity, notes
+ *   3  photos   `SortablePhotoGrid` — drawn only when `photos` is given
+ *   4  options  `ShipmentOptionsList` — the answers that move the number
+ *   5  price    `PriceSummary` — last, so the options and the number they move
+ *               are on one screen
+ *
+ * **IT DRAWS NOTHING OF ITS OWN.** Every section is an existing Bloom family
+ * handed its props unchanged: there is one component that knows what a route
+ * looks like, one that knows what a photo grid looks like, one that knows what
+ * an itemised price looks like, and a form that redrew any of them would be a
+ * copy that drifts. A section whose props are absent is not drawn — a job that
+ * needs no photograph should not be asked for one.
+ *
+ * **THE LAST SECTION HAS NO RULE UNDER IT**, and the footer sits below it with
+ * none either: a divider is a separator between two things, and there is
+ * nothing after the last one.
+ */
+
+function ShipmentRequestFormComponent({
+  route,
+  load,
+  onLoadChange,
+  loadProps,
+  photos,
+  options,
+  price,
+  footer,
+  labels: labelOverrides,
+  disabled = false,
+  accessibilityLabel = 'Shipment request',
+  style,
+  testID,
+}: ShipmentRequestFormProps) {
+  const labels = useMemo(
+    () => ({ ...SHIPMENT_REQUEST_LABELS, ...labelOverrides }),
+    [labelOverrides],
+  );
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  // Which sections exist, so the LAST one can drop its rule without every
+  // section having to know what follows it.
+  const sections: { key: string; title: string; description?: string; content: React.ReactNode }[] = [
+    {
+      key: 'route',
+      title: labels.route,
+      description: labels.routeDescription,
+      content: <RouteStops {...route} testID={route.testID ?? id('route')} />,
+    },
+    {
+      key: 'load',
+      title: labels.load,
+      description: labels.loadDescription,
+      content: (
+        <ShipmentLoadPicker
+          {...loadProps}
+          value={load}
+          onValueChange={onLoadChange}
+          disabled={disabled || loadProps?.disabled}
+          testID={id('load')}
+        />
+      ),
+    },
+  ];
+
+  if (photos) {
+    sections.push({
+      key: 'photos',
+      title: labels.photos,
+      description: labels.photosDescription,
+      content: <SortablePhotoGrid {...photos} disabled={disabled || photos.disabled} testID={id('photos')} />,
+    });
+  }
+
+  if (options) {
+    sections.push({
+      key: 'options',
+      title: labels.options,
+      description: labels.optionsDescription,
+      content: (
+        <ShipmentOptionsList
+          {...options}
+          disabled={disabled || options.disabled}
+          testID={id('options')}
+        />
+      ),
+    });
+  }
+
+  if (price) {
+    sections.push({
+      key: 'price',
+      title: labels.price,
+      description: labels.priceDescription,
+      content: <PriceSummary {...price} testID={id('price')} />,
+    });
+  }
+
+  return (
+    <View
+      testID={testID}
+      role="form"
+      accessibilityLabel={accessibilityLabel}
+      style={style}
+    >
+      {sections.map((section, index) => (
+        <FilterSection
+          key={section.key}
+          title={section.title}
+          description={section.description === '' ? undefined : section.description}
+          divider={index < sections.length - 1}
+          testID={id(`section-${section.key}`)}
+        >
+          {section.content}
+        </FilterSection>
+      ))}
+      {footer ? (
+        <View style={{ paddingTop: 24 }} testID={id('footer')}>
+          {footer}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const ShipmentRequestForm = memo(ShipmentRequestFormComponent);
+ShipmentRequestForm.displayName = 'ShipmentRequestForm';

package/src/shipment-request/constants.ts

@@ -0,0 +1,128 @@
+import { RiArrowUpDownLine } from '../icons/remix/RiArrowUpDownLine';
+import { RiBox3Line } from '../icons/remix/RiBox3Line';
+import { RiMailLine } from '../icons/remix/RiMailLine';
+import { RiRestaurantLine } from '../icons/remix/RiRestaurantLine';
+import { RiSofaLine } from '../icons/remix/RiSofaLine';
+import { RiStackLine } from '../icons/remix/RiStackLine';
+import { RiStairsLine } from '../icons/remix/RiStairsLine';
+import { RiWalkLine } from '../icons/remix/RiWalkLine';
+import type {
+  ShipmentAccessOption,
+  ShipmentLoadKindOption,
+  ShipmentLoadPickerLabels,
+  ShipmentLoadSizeOption,
+  ShipmentOptionsLabels,
+  ShipmentRequestFormLabels,
+} from './types';
+
+/**
+ * The five kinds, in the order a marketplace draws them: the two a bike can
+ * take first, then the two that need a van, then food — which is not a size at
+ * all but a condition.
+ */
+export const SHIPMENT_LOAD_KINDS: readonly ShipmentLoadKindOption[] = [
+  {
+    value: 'envelope',
+    label: 'Envelope',
+    description: 'Documents, keys, anything flat.',
+    icon: RiMailLine,
+  },
+  {
+    value: 'parcel',
+    label: 'Parcel',
+    description: 'A box or a bag one person can carry.',
+    icon: RiBox3Line,
+  },
+  {
+    value: 'furniture',
+    label: 'Furniture',
+    description: 'A sofa, a table, a mattress — two people at both ends.',
+    icon: RiSofaLine,
+  },
+  {
+    value: 'pallet',
+    label: 'Pallet',
+    description: 'Wrapped and stacked, moved with a tail lift.',
+    icon: RiStackLine,
+  },
+  {
+    value: 'food',
+    label: 'Food',
+    description: 'A restaurant run, kept at temperature.',
+    icon: RiRestaurantLine,
+  },
+];
+
+/**
+ * The four size rungs.
+ *
+ * The segments are single letters because they sit in one control at phone
+ * width and four words never fit; the sentence each one means is drawn UNDER
+ * the control, for the chosen rung only. A control whose options all carry
+ * their own sentence is a list, not a segmented control.
+ */
+export const SHIPMENT_LOAD_SIZES: readonly ShipmentLoadSizeOption[] = [
+  { value: 'small', label: 'S', detail: 'Up to a shoebox — 35 × 25 × 20 cm.' },
+  { value: 'medium', label: 'M', detail: 'Up to a cabin bag — 55 × 40 × 25 cm.' },
+  { value: 'large', label: 'L', detail: 'Up to a washing machine — 85 × 60 × 60 cm.' },
+  { value: 'extraLarge', label: 'XL', detail: 'Bigger than that — tell us in the notes.' },
+];
+
+/** Ground floor, stairs, lift. One of them is true, so they are a single choice. */
+export const SHIPMENT_ACCESS_OPTIONS: readonly ShipmentAccessOption[] = [
+  { value: 'ground', label: 'Ground floor', icon: RiWalkLine },
+  { value: 'stairs', label: 'Stairs', icon: RiStairsLine },
+  { value: 'lift', label: 'Lift', icon: RiArrowUpDownLine },
+];
+
+/** The load picker's default copy. */
+export const SHIPMENT_LOAD_LABELS: Required<ShipmentLoadPickerLabels> = {
+  kind: 'What are we moving?',
+  size: 'Size',
+  weight: 'Weight',
+  weightUnit: 'kg',
+  quantity: 'How many',
+  quantityValue: (quantity: number) => (quantity === 1 ? '1 item' : `${quantity} items`),
+  notes: 'Anything else the carrier should know?',
+  notesPlaceholder: 'Fragile, a lift code, where to leave it…',
+};
+
+/** The options list's default copy. */
+export const SHIPMENT_OPTIONS_LABELS: Required<ShipmentOptionsLabels> = {
+  extras: 'Extras',
+  access: 'Access at both ends',
+  window: 'When should it be collected?',
+};
+
+/** The form's default section headings. */
+export const SHIPMENT_REQUEST_LABELS: Required<ShipmentRequestFormLabels> = {
+  route: 'Where it goes',
+  routeDescription: 'Pick-up first, drop-off last.',
+  load: 'The load',
+  loadDescription: '',
+  photos: 'Photos',
+  photosDescription: 'A photo of the load is the single biggest thing you can do for the quotes you get back.',
+  options: 'Options',
+  optionsDescription: 'Each of these changes the price.',
+  price: 'Price',
+  priceDescription: '',
+};
+
+/**
+ * The picker geometry this family owns.
+ *
+ * The SECTION geometry is deliberately absent: `ShipmentRequestForm` draws its
+ * sections with `FilterSection`, which already owns the inset, the heading gap
+ * and the rule between two sections. A second set of numbers here would be a
+ * copy that drifts from the one actually drawn.
+ */
+export const SHIPMENT_REQUEST_GEOMETRY = {
+  controlGap: 20,
+  chipGap: 8,
+  /** The weight field's width beside the stepper on a wide form. */
+  weightWidth: 180,
+  /** The form's OWN width under which the paired controls stack. */
+  narrowWidth: 480,
+} as const;
+
+export type ShipmentRequestGeometry = typeof SHIPMENT_REQUEST_GEOMETRY;