@oxy.so/bloom 3.5.0 → 4.0.0

package/src/tag-field/constants.ts

@@ -0,0 +1,64 @@
+/**
+ * `TagField`'s geometry — the numbers that make the field one of `text-field`'s
+ * boxes rather than a lookalike, and the suggestion list one of Bloom's menus.
+ *
+ * They are literals here rather than inline in the component because two of
+ * them are CONSEQUENCES of `text-field`'s own table and go wrong in silence if
+ * they drift: the shell's vertical inset and the chip rung have to add back up
+ * to the rung height the field beside it is, or an empty `TagField` and an
+ * empty `TextFieldInput` in the same form are two different heights — which is
+ * exactly how this control stopped reading as a field.
+ */
+import type { ChipSize } from '../chip';
+import type { TagFieldSize } from './types';
+
+/**
+ * Room above and below a line of chips, inside the shell.
+ *
+ * The input is `TEXT_FIELD_GEOMETRY[size].height - 2 * this`, so an EMPTY tag
+ * field is exactly the text field's rung: 4 + 28 + 4 = 36 on `medium`.
+ */
+export const TAG_FIELD_SHELL_INSET = 4;
+
+/** Between two chips, and between the last chip and the caret. */
+export const TAG_FIELD_GAP = 6;
+
+/**
+ * The caret's floor. Below it the input wraps to a line of its own rather than
+ * shrinking to a slot too narrow to read what is being typed in.
+ */
+export const TAG_FIELD_INPUT_MIN_WIDTH = 120;
+
+/**
+ * The chip rung that FILLS the shell's inner height: `large` (28) inside the 36
+ * rung, `medium` (24) inside the 32 one. Not a smaller pill floating in the
+ * box — a chosen thing sits on the same line the caret does, which is what
+ * `mail-compose`'s recipient chips do inside their own row.
+ */
+export const TAG_CHIP_RUNG: Readonly<Record<TagFieldSize, ChipSize>> = {
+  medium: 'large',
+  small: 'medium',
+  xs: 'small',
+  sm: 'medium',
+  md: 'large',
+  lg: 'xl',
+};
+
+/* -------------------------------------------------------------------------- */
+/*  The suggestion list — the menu vocabulary, in normal flow                  */
+/* -------------------------------------------------------------------------- */
+
+/** `rounded-radius-16` — the corner every anchored Bloom surface takes. */
+export const TAG_FIELD_LIST_RADIUS = 16;
+/** `p-space-8` — the listbox panel's inset (`floating/constants.ts`). */
+export const TAG_FIELD_LIST_PADDING = 8;
+/** The panel's own row rhythm (`gap-space-4`). */
+export const TAG_FIELD_LIST_GAP = 4;
+/** `rounded-[10px]` — the menu row's corner. */
+export const TAG_FIELD_OPTION_RADIUS = 10;
+/** `p-space-8` — 8 on every side, which is what makes a one-line row 36 tall. */
+export const TAG_FIELD_OPTION_PADDING = 8;
+/** `gap-space-8` between a row's label and its meta. */
+export const TAG_FIELD_OPTION_GAP = 8;
+/** One menu row: 8 + a 20px line box + 8. */
+export const TAG_FIELD_OPTION_MIN_HEIGHT = 36;

package/src/tag-field/index.ts

@@ -0,0 +1,4 @@
+export { TagField } from './TagField';
+export { commitTag, filterSuggestions, isDuplicate, normalizeTag, toSuggestion } from './shared';
+export type { TagCommitResult } from './shared';
+export type { TagFieldLabels, TagFieldProps, TagFieldSize, TagSuggestion } from './types';

package/src/tag-field/shared.ts

@@ -0,0 +1,101 @@
+/**
+ * The three decisions a tag input makes that have nothing to do with rendering:
+ * what a typed string BECOMES, whether it may be added, and what to offer next.
+ *
+ * They are here because every one of them is a silent failure in a component
+ * test: a duplicate that is added anyway renders a perfectly ordinary second
+ * chip, and a suggestion list that forgot to exclude what is already committed
+ * renders a perfectly ordinary list.
+ */
+import type { TagSuggestion } from './types';
+
+/** The default normalisation: surrounding whitespace is not part of a tag. */
+export function normalizeTag(raw: string): string {
+  return raw.trim();
+}
+
+/** A bare string suggestion is shorthand for `{ value }`. */
+export function toSuggestion(entry: string | TagSuggestion): TagSuggestion {
+  return typeof entry === 'string' ? { value: entry } : entry;
+}
+
+/**
+ * Whether `candidate` is already in `value`.
+ *
+ * Case-INSENSITIVE, because "Design" and "design" are one tag to everybody
+ * except a string comparison, and a list that holds both is the bug a tag input
+ * exists to prevent. Callers that want them distinct pass their own `normalize`
+ * — which runs first, and can encode any answer including this one.
+ */
+export function isDuplicate(value: ReadonlyArray<string>, candidate: string): boolean {
+  const key = candidate.toLocaleLowerCase();
+  return value.some((tag) => tag.toLocaleLowerCase() === key);
+}
+
+export interface TagCommitResult {
+  /** The next list, or `null` when nothing changed. */
+  next: ReadonlyArray<string> | null;
+  /** Why it did not change. `'full'` is the one the caller reports; the rest are silent. */
+  rejected?: 'empty' | 'duplicate' | 'full' | 'unknown';
+}
+
+/**
+ * Try to commit one typed string.
+ *
+ * **A duplicate is rejected QUIETLY.** No error, no shake, no hint: the tag the
+ * user asked for is already there, so the field is already in the state they
+ * wanted and telling them off for it is noise. Being FULL is the one refusal
+ * with a consequence a caller may want to announce, so it is the one that is
+ * named back.
+ */
+export function commitTag(
+  value: ReadonlyArray<string>,
+  raw: string,
+  options: {
+    normalize?: (raw: string) => string;
+    max?: number;
+    allowCreate?: boolean;
+    known?: ReadonlyArray<string>;
+  } = {},
+): TagCommitResult {
+  const { normalize = normalizeTag, max, allowCreate = true, known } = options;
+  const tag = normalize(raw);
+  if (tag === '') return { next: null, rejected: 'empty' };
+  if (isDuplicate(value, tag)) return { next: null, rejected: 'duplicate' };
+  if (!allowCreate) {
+    const inVocabulary = (known ?? []).some(
+      (entry) => entry.toLocaleLowerCase() === tag.toLocaleLowerCase(),
+    );
+    if (!inVocabulary) return { next: null, rejected: 'unknown' };
+  }
+  if (max !== undefined && value.length >= max) return { next: null, rejected: 'full' };
+  return { next: [...value, tag] };
+}
+
+/**
+ * What to offer, given what is typed and what is already committed.
+ *
+ * Committed tags are excluded — offering one that is already a chip is offering
+ * a no-op. The match is a case-insensitive SUBSTRING rather than a prefix: tag
+ * vocabularies are compound ("Q3 planning", "planning — legacy") and a prefix
+ * match hides the entry the typist was looking for.
+ */
+export function filterSuggestions(
+  suggestions: ReadonlyArray<string | TagSuggestion>,
+  query: string,
+  committed: ReadonlyArray<string>,
+  limit: number,
+): ReadonlyArray<TagSuggestion> {
+  const q = query.trim().toLocaleLowerCase();
+  const out: TagSuggestion[] = [];
+  for (const entry of suggestions) {
+    const suggestion = toSuggestion(entry);
+    if (isDuplicate(committed, suggestion.value)) continue;
+    if (q !== '' && !`${suggestion.value} ${suggestion.label ?? ''}`.toLocaleLowerCase().includes(q)) {
+      continue;
+    }
+    out.push(suggestion);
+    if (out.length >= limit) break;
+  }
+  return out;
+}

package/src/tag-field/types.ts

@@ -0,0 +1,90 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AccentTone } from '../theme/accent-colors';
+import type { TextFieldSize } from '../text-field/shared';
+
+/** The field's two heights, borrowed from `text-field` so a form row lines up. */
+export type TagFieldSize = TextFieldSize;
+
+/** One offer in the suggestion list. A bare string is shorthand for `{ value }`. */
+export interface TagSuggestion {
+  /** The value committed when it is chosen. */
+  value: string;
+  /** What the row reads, when it is not the value ("Design · 24 items"). */
+  label?: string;
+  /** A count or hint drawn quietly at the end of the row. */
+  meta?: string;
+}
+
+/** The English words `TagField` composes. */
+export interface TagFieldLabels {
+  /** Names a tag's × button, given the tag. Default ``(tag) => `Remove ${tag}` ``. */
+  remove?: (tag: string) => string;
+  /** The hint under a full field, given the max. Default ``(max) => `${max} maximum` ``. */
+  full?: (max: number) => string;
+  /** Names the suggestion list. Default `"Suggestions"`. */
+  suggestions?: string;
+}
+
+export interface TagFieldProps {
+  /** The committed tags, in order. Controlled — the app owns the list. */
+  value: ReadonlyArray<string>;
+  /** Called with the next list, on an add and on a remove. */
+  onChange: (value: ReadonlyArray<string>) => void;
+  /**
+   * The text being typed, when the app wants to own it (to drive a remote
+   * suggestion query). Omitted, the field keeps it internally.
+   */
+  inputValue?: string;
+  /** Called with every keystroke. Given with `inputValue`, this is the only way the text changes. */
+  onInputValueChange?: (text: string) => void;
+  /** Drawn while the field is empty. */
+  placeholder?: string;
+  /**
+   * What to offer under the field. Filtered by what has been typed and by what
+   * is already committed, so an app can hand over its whole vocabulary.
+   */
+  suggestions?: ReadonlyArray<string | TagSuggestion>;
+  /** How many suggestions to draw. Default `6`. */
+  maxSuggestions?: number;
+  /**
+   * Whether a tag that is not in `suggestions` can be committed. Default
+   * `true`. `false` makes the field a picker over a closed vocabulary.
+   */
+  allowCreate?: boolean;
+  /** The ceiling. At the ceiling the input stops accepting and the hint says so. */
+  max?: number;
+  /** Called when a commit was refused because the field is full. */
+  onMaxReached?: () => void;
+  /**
+   * How a raw string becomes a tag before it is compared and stored — trimmed
+   * by default. Comparison is done on the NORMALISED form, so `"  Design "`
+   * and `"Design"` are one tag and the second is dropped in silence.
+   */
+  normalize?: (raw: string) => string;
+  /** The tone the committed chips are painted in. Default `default`. */
+  tone?: AccentTone;
+  /**
+   * Default `medium` (36 tall); `small` is 32. Omitted, it is INHERITED from
+   * the nearest `ControlSurface` — the same vocabulary `TextField` and
+   * `Textarea` take — so a filter row asks for `small` once instead of writing
+   * it on five controls.
+   */
+  size?: TagFieldSize;
+  disabled?: boolean;
+  /** Paints the error shell. Combined with an enclosing `Field`'s, never replaced. */
+  invalid?: boolean;
+  /**
+   * The control's own name, for a field used outside a `Field`. Inside one the
+   * field's label wins — the words above the box and the announced name cannot
+   * disagree.
+   */
+  label?: string;
+  /** Always wins, over the control's own label AND over the field's. */
+  accessibilityLabel?: string;
+  /** An id the caller wired itself. Outranks the one a `Field` supplies. */
+  nativeID?: string;
+  labels?: TagFieldLabels;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/task-list/TaskList.tsx

@@ -17,7 +17,6 @@ import {
   useAgentLogMotion,
   useAgentLogRevealTicker,
 } from '../agent-log';
-import { mixColor, resolveButtonRamps } from '../button/shared';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -75,46 +74,15 @@ export interface TaskListPalette {
   ring: string;
 }
 
-/**
- * Semantic tokens mapped onto Bloom's ramps (`button/shared`):
- *
- *                                  light                   dark
- *   text-primary                   text                    text
- *   text-secondary                 neutral-500             neutral-500
- *   foreground-icon-secondary      neutral-500             neutral-500
- *   foreground-icon-tertiary       neutral-400             neutral-600
- *   border-button-default/50       neutral-200 @50% over   neutral-700 @50% over
- *                                  the chip surface        the chip surface
- *   border-button-hover            neutral-300             neutral-500
- *   background-secondary-default   neutral-100             neutral-900
- *   background-tertiary-default    neutral-200             neutral-800
- *   border-focus-ring              accent-500              accent-500
- */
+/** Canonical theme surfaces, foregrounds and focus roles. */
 export function resolveTaskListPalette(theme: Theme): TaskListPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const shared = {
-    textPrimary: theme.colors.text,
-    textSecondary: n[500],
-    iconSecondary: n[500],
-    ring: accent[500],
+  const c = theme.colors;
+  return {
+    textPrimary: c.text, textSecondary: c.textSecondary,
+    iconSecondary: c.textSecondary, iconTertiary: c.textTertiary, ring: c.primary,
+    chipBorder: c.borderLight, chipBorderHover: c.border,
+    chipSurface: c.backgroundSecondary, chipSurfaceHover: c.backgroundTertiary,
   };
-  return theme.isDark
-    ? {
-        ...shared,
-        iconTertiary: n[600],
-        chipBorder: mixColor(n[900], n[700], 0.5),
-        chipBorderHover: n[500],
-        chipSurface: n[900],
-        chipSurfaceHover: n[800],
-      }
-    : {
-        ...shared,
-        iconTertiary: n[400],
-        chipBorder: mixColor(n[100], n[200], 0.5),
-        chipBorderHover: n[300],
-        chipSurface: n[100],
-        chipSurfaceHover: n[200],
-      };
 }
 
 // ---------------------------------------------------------------------------

package/src/tenancy/shared.ts

@@ -52,24 +52,24 @@ export interface HousingPalette {
 
 export function resolveHousingPalette(theme: Theme): HousingPalette {
   const menu = resolveMenuPalette(theme);
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
     surface: menu.surface,
     border: menu.border,
-    hairline: dark ? n[700] : n[200],
+    hairline: theme.colors.border,
     highlight: menu.rowHighlight,
-    tile: dark ? n[700] : n[100],
-    track: dark ? n[700] : n[200],
-    markerRing: dark ? n[500] : n[300],
+    tile: theme.colors.backgroundSecondary,
+    track: theme.colors.backgroundTertiary,
+    markerRing: theme.colors.border,
     ring: accent[500],
     text: theme.colors.text,
     textSecondary: theme.colors.textSecondary,
     shadow: menu.shadow,
     toggleOn: theme.colors.primary,
     toggleOnForeground: theme.colors.primaryForeground,
-    toggleOff: dark ? n[700] : n[100],
-    toggleOffHover: dark ? n[600] : n[200],
+    toggleOff: theme.colors.backgroundTertiary,
+    toggleOffHover: theme.colors.backgroundSecondary,
   };
 }
 

package/src/text-field/TextField.tsx

@@ -1,3 +1,5 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance } from '../appearance';
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
   type AccessibilityProps,
@@ -58,7 +60,7 @@ import { useFieldMembership } from '../field/membership';
 
 interface TextFieldContextValue {
   inputRef: React.RefObject<TextInput | null>;
-  isInvalid: boolean;
+  invalid: boolean;
   /** Disabled by the root's `disabled` OR by the input reporting itself disabled. */
   disabled: boolean;
   /** Lets the input report `disabled` / `editable={false}` up to its siblings. */
@@ -99,7 +101,7 @@ Context.displayName = 'BloomTextFieldContext';
  */
 export interface TextFieldGroupContextValue {
   size: TextFieldSize;
-  isInvalid: boolean;
+  invalid: boolean;
   disabled: boolean;
 }
 export const TextFieldGroupContext = createContext<TextFieldGroupContextValue | null>(null);
@@ -153,7 +155,8 @@ const MULTILINE_MIN_HEIGHT = 3 * TEXT_FIELD_TEXT.lineHeight + 16;
 
 export function TextField({
   children,
-  isInvalid: isInvalidProp = false,
+  invalid: invalidNew,
+  isInvalid,
   disabled: disabledProp = false,
   size: sizeProp,
   radius = TEXT_FIELD_RADIUS,
@@ -161,20 +164,22 @@ export function TextField({
   style,
 }: TextFieldProps) {
   const theme = useTheme();
+  const invalidProp = invalidNew ?? isInvalid ?? false;
   const group = useContext(TextFieldGroupContext);
   const bare = group !== null;
   // The enclosing `Field`, read HERE as well as in `TextFieldInput`: the shell
   // is what paints the disabled and invalid chrome, and a shell that waited for
   // its input to report up would paint nothing at all around a child that is not
   // Bloom's input. Both directions are OR, so the two readings cannot disagree.
-  const member = useFieldMembership({ disabled: disabledProp, invalid: isInvalidProp });
-  const isInvalid = member.invalid || (group?.isInvalid ?? false);
+  const member = useFieldMembership({ disabled: disabledProp, invalid: invalidProp });
+  const invalid = member.invalid || (group?.invalid ?? false);
   const disabled = member.disabled || (group?.disabled ?? false);
   // An `InputGroup` outranks everything: its members have to be one height. Then
   // the caller's own prop, then the container's density (`ControlSurface`), then
   // `medium` — the precedence rule in `docs/composition.mdx`, with the group's
   // geometry first because it is a constraint rather than a default.
-  const inheritedSize = useInheritedControl('density', sizeProp, 'medium');
+  const { size: scopedSize } = useBloomAppearance({ size: normalizeBloomSize(sizeProp) }, { size: 'md', tone: 'neutral' });
+  const inheritedSize = useInheritedControl('density', normalizeBloomSize(sizeProp), scopedSize);
   const size = group?.size ?? inheritedSize;
   const inputRef = useRef<TextInput>(null);
   const [inputDisabled, setInputDisabled] = useState(false);
@@ -204,7 +209,7 @@ export function TextField({
       onFocus,
       onBlur,
       addonFocused,
-      isInvalid,
+      invalid,
       disabled: resolvedDisabled,
       setInputDisabled,
       size,
@@ -212,7 +217,7 @@ export function TextField({
       radius,
       bare,
     }),
-    [inputRef, hovered, onHoverIn, onHoverOut, focused, onFocus, onBlur, addonFocused, isInvalid, resolvedDisabled, size, palette, radius, bare],
+    [inputRef, hovered, onHoverIn, onHoverOut, focused, onFocus, onBlur, addonFocused, invalid, resolvedDisabled, size, palette, radius, bare],
   );
 
   return (
@@ -336,9 +341,11 @@ export function TextFieldInput({
   label,
   placeholder,
   value,
+  onValueChange: onValueChangeProp,
   onChangeText,
   onFocus,
   onBlur,
+  invalid: invalidNew,
   isInvalid,
   disabled,
   size,
@@ -348,6 +355,8 @@ export function TextFieldInput({
   ...rest
 }: TextFieldInputProps) {
   const theme = useTheme();
+  const invalidProp = invalidNew ?? isInvalid;
+  const onValueChange = onValueChangeProp ?? onChangeText;
   // Read directly rather than through `useTextFieldContext`: a missing root is
   // not an error here, it is the branch below.
   const ctx = useContext(Context);
@@ -376,7 +385,7 @@ export function TextFieldInput({
     // one arrangement where the two halves of the control disagree.
     return (
       <TextField
-        isInvalid={isInvalid || field?.invalid === true}
+        invalid={invalidProp || field?.invalid === true}
         disabled={disabled || field?.disabled === true}
         size={size}
       >
@@ -384,8 +393,8 @@ export function TextFieldInput({
           label={label}
           placeholder={placeholder}
           value={value}
-          onChangeText={onChangeText}
-          isInvalid={isInvalid}
+          onValueChange={onValueChange}
+          invalid={invalidProp}
           disabled={disabled}
           floatingLabel={floatingLabel}
           style={style}
@@ -404,7 +413,7 @@ export function TextFieldInput({
     ),
   );
 
-  const invalid = ctx.isInvalid || isInvalid === true || field?.invalid === true;
+  const invalid = ctx.invalid || invalidProp === true || field?.invalid === true;
   const fieldDisabled = ctx.disabled || inputDisabled;
   const state = {
     hovered: ctx.hovered,
@@ -448,10 +457,10 @@ export function TextFieldInput({
       <FloatingLabelInput
         label={accessibleName}
         value={value}
-        onChangeText={onChangeText}
+        onValueChange={onValueChange}
         onFocus={onFocus}
         onBlur={onBlur}
-        isInvalid={invalid}
+        invalid={invalid}
         refs={refs}
         style={style}
         {...rest}
@@ -518,7 +527,7 @@ export function TextFieldInput({
         accessibilityLabel={accessibleName}
         ref={refs}
         value={value}
-        onChangeText={onChangeText}
+        onChangeText={onValueChange}
         onFocus={(e) => {
           ctx.onFocus();
           onFocus?.(e);
@@ -550,8 +559,8 @@ type FloatingLabelInputProps = Omit<
 > & {
   label: string;
   value?: string;
-  onChangeText?: (value: string) => void;
-  isInvalid?: boolean;
+  onValueChange?: (value: string) => void;
+  invalid?: boolean;
   refs: (instance: TextInput | null) => void;
 };
 
@@ -575,10 +584,10 @@ type FloatingLabelInputProps = Omit<
 function FloatingLabelInput({
   label,
   value,
-  onChangeText,
+  onValueChange,
   onFocus,
   onBlur,
-  isInvalid,
+  invalid: invalidProp,
   refs,
   style,
   ...rest
@@ -589,7 +598,7 @@ function FloatingLabelInput({
 
   const hasValue = (value?.length ?? 0) > 0;
   const floated = ctx.focused || hasValue;
-  const invalid = ctx.isInvalid || isInvalid === true;
+  const invalid = ctx.invalid || invalidProp === true;
   const palette = ctx.palette;
 
   const progress = useRef(new Animated.Value(floated ? 1 : 0)).current;
@@ -679,7 +688,7 @@ function FloatingLabelInput({
         accessibilityLabel={label}
         ref={refs}
         value={value}
-        onChangeText={onChangeText}
+        onChangeText={onValueChange}
         onFocus={(e) => {
           ctx.onFocus();
           onFocus?.(e);
@@ -748,11 +757,13 @@ export function TextFieldLabel({
  */
 export function TextFieldHint({
   children,
-  isInvalid = false,
+  invalid: invalidProp,
+  isInvalid,
   nativeID,
   style,
 }: TextFieldHintProps) {
   const theme = useTheme();
+  const invalid = invalidProp ?? isInvalid ?? false;
   const palette = useTextFieldPalette();
   return (
     <Text
@@ -762,7 +773,7 @@ export function TextFieldHint({
         {
           paddingTop: 1,
           marginTop: TEXT_FIELD_STACK_GAP,
-          color: isInvalid ? palette.error : palette.hint,
+          color: invalid ? palette.error : palette.hint,
         },
         style,
       ]}>
@@ -779,7 +790,7 @@ export function TextFieldHint({
 export function TextFieldIcon({ icon: Comp, position = 'leading' }: TextFieldIconProps) {
   const ctx = useTextFieldContext();
   const color = resolveIconColor(ctx.palette, {
-    invalid: ctx.isInvalid,
+    invalid: ctx.invalid,
     disabled: ctx.disabled,
   });
 
@@ -862,13 +873,13 @@ export function TextFieldGhost({
         a.z_10,
         platform({
           native: {
-            paddingLeft: TEXT_FIELD_GEOMETRY.medium.paddingHorizontal + textOffset,
+            paddingLeft: TEXT_FIELD_GEOMETRY.md.paddingHorizontal + textOffset,
           },
           web: {
             paddingLeft: textOffset,
           },
         }),
-        web({ paddingRight: TEXT_FIELD_GEOMETRY.medium.paddingHorizontal }),
+        web({ paddingRight: TEXT_FIELD_GEOMETRY.md.paddingHorizontal }),
         a.overflow_hidden,
         a.max_w_full,
       ]}