cursedbelt 5.94.0 → 5.95.0

package/src/react/components/DatePicker.tsx

@@ -1,8 +1,18 @@
 import { DayPicker, type Matcher } from '@daypicker/react';
-import { Calendar } from 'lucide-react';
-import { useState } from 'react';
+import {
+  Calendar,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
+import { type ReactNode, useEffect, useId, useState } from 'react';
 import { useMediaQuery } from '../hooks/useMediaQuery.js';
 import { cn } from '../lib/cn.js';
+import { RAW_BUTTON } from '../lib/cn.js';
+import { TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
+import { parseDateText } from '../lib/dateText.js';
 import {
   DAY_PICKER_CLASS_NAMES,
   DayPickerChevron,
@@ -11,10 +21,13 @@ import {
   localDateToIso,
   ThemedDayButton,
 } from '../lib/daypicker.js';
-import { type ControlSize, declareFieldWidth, fieldControlClass } from '../lib/field.js';
+import { type ControlSize, declareFieldWidth } from '../lib/field.js';
 import { Drawer } from './Drawer.js';
+import { Button } from './Button.js';
+import { IconButton } from './IconButton.js';
+import { Input } from './Input.js';
 import { Popover } from './Popover.js';
-import { RAW_BUTTON } from '../lib/cn.js';
+import { ScrollArea } from './ScrollArea.js';
 
 export interface DatePickerProps {
   /** ISO date string 'YYYY-MM-DD'. Empty string or undefined = no selection. */
@@ -36,14 +49,256 @@ export interface DatePickerProps {
   size?: ControlSize;
 }
 
+type CalendarView = 'days' | 'years' | 'months';
+
+const monthStart = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
+const addMonths = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+
+/** Keep a month inside the [min, max] months, if given. */
+function clampMonth(d: Date, min?: Date, max?: Date): Date {
+  const first = monthStart(d);
+  if (min && first < monthStart(min)) return monthStart(min);
+  if (max && first > monthStart(max)) return monthStart(max);
+  return first;
+}
+
+const sameMonth = (a: Date, b: Date) =>
+  a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+
+const CHOOSER_BUTTON =
+  `flex h-[var(--control-h-sm)] ${TAP_TARGET_HEIGHT} w-full items-center justify-center rounded-md text-sm transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-30`;
+const CHOOSER_SELECTED = 'bg-accent-solid text-white hover:bg-accent-solid-hover';
+
+/** One cell of the year / month chooser grids. */
+function ChooserCell({
+  current,
+  disabled,
+  tall,
+  label,
+  onPick,
+  children,
+}: {
+  current: boolean;
+  disabled?: boolean;
+  tall?: boolean;
+  label?: string;
+  onPick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      // guardrails-ignore no-raw-action-button: task 3764 — a cell in the year/month chooser grid, a
+      // presentational selection like ThemedDayButton (STANDARDS.md §4a carve-out).
+      type='button'
+      disabled={disabled}
+      aria-current={current ? 'date' : undefined}
+      aria-label={label}
+      ref={(el) => {
+        // Bring the viewed year into view in the scrolling year grid.
+        if (el && current) el.scrollIntoView?.({ block: 'center' });
+      }}
+      className={cn(
+        RAW_BUTTON,
+        CHOOSER_BUTTON,
+        tall && 'h-[var(--control-h-lg)]',
+        current && CHOOSER_SELECTED,
+      )}
+      onClick={onPick}
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * The calendar body: month + year steppers, a caption that opens a year/month chooser, and
+ * the day grid. PageUp/PageDown (month) and Shift+PageUp/PageDown (year) are DayPicker's own,
+ * per the WAI-ARIA date-picker dialog pattern; the month is controlled here so the steppers,
+ * the chooser and the keys all move the same view.
+ */
+function DatePickerCalendar({
+  selected,
+  month,
+  onMonthChange,
+  onSelect,
+  minDate,
+  maxDate,
+}: {
+  selected: Date | undefined;
+  month: Date;
+  onMonthChange: (month: Date) => void;
+  onSelect: (date: Date | undefined) => void;
+  minDate: Date | undefined;
+  maxDate: Date | undefined;
+}) {
+  const [view, setView] = useState<CalendarView>('days');
+  const [chosenYear, setChosenYear] = useState(month.getFullYear());
+
+  const disabledMatchers: Matcher[] = [];
+  if (minDate) disabledMatchers.push({ before: minDate });
+  if (maxDate) disabledMatchers.push({ after: maxDate });
+
+  const step = (months: number) => onMonthChange(clampMonth(addMonths(month, months), minDate, maxDate));
+  const stepDisabled = (months: number) =>
+    sameMonth(clampMonth(addMonths(month, months), minDate, maxDate), month);
+
+  if (view === 'years') {
+    const thisYear = new Date().getFullYear();
+    const first = minDate ? minDate.getFullYear() : Math.min(1900, month.getFullYear());
+    const last = maxDate ? maxDate.getFullYear() : Math.max(thisYear + 30, month.getFullYear());
+    const years = Array.from({ length: last - first + 1 }, (_, i) => first + i);
+    return (
+      <div>
+        <div className={`flex h-[var(--control-h-lg)] ${TAP_TARGET_HEIGHT} items-center gap-1 pb-1`}>
+          <IconButton label='Back to calendar' size='sm' onClick={() => setView('days')}>
+            <ChevronLeft />
+          </IconButton>
+          <span className='flex-1 text-center text-sm font-semibold'>Choose a year</span>
+          <span className='w-[var(--control-h-sm)]' aria-hidden />
+        </div>
+        <ScrollArea className='max-h-60' space='none' safeArea={false}>
+        <fieldset aria-label='Year' className='m-0 grid min-w-0 grid-cols-4 gap-1 border-0 p-0'>
+          {years.map((year) => {
+            const isCurrent = year === month.getFullYear();
+            return (
+              <ChooserCell
+                key={year}
+                current={isCurrent}
+                onPick={() => {
+                  setChosenYear(year);
+                  setView('months');
+                }}
+              >
+                {year}
+              </ChooserCell>
+            );
+          })}
+        </fieldset>
+        </ScrollArea>
+      </div>
+    );
+  }
+
+  if (view === 'months') {
+    return (
+      <div>
+        <div className={`flex h-[var(--control-h-lg)] ${TAP_TARGET_HEIGHT} items-center gap-1 pb-1`}>
+          <IconButton label='Choose another year' size='sm' onClick={() => setView('years')}>
+            <ChevronLeft />
+          </IconButton>
+          <span className='flex-1 text-center text-sm font-semibold'>{chosenYear}</span>
+          <span className='w-[var(--control-h-sm)]' aria-hidden />
+        </div>
+        <fieldset aria-label='Month' className='m-0 grid min-w-0 grid-cols-3 gap-1 border-0 p-0'>
+          {Array.from({ length: 12 }, (_, i) => {
+            const start = new Date(chosenYear, i, 1);
+            const outOfRange =
+              (minDate !== undefined && start < monthStart(minDate)) ||
+              (maxDate !== undefined && start > monthStart(maxDate));
+            const isCurrent = sameMonth(start, month);
+            return (
+              <ChooserCell
+                key={start.getTime()}
+                current={isCurrent}
+                disabled={outOfRange}
+                tall
+                label={start.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}
+                onPick={() => {
+                  onMonthChange(start);
+                  setView('days');
+                }}
+              >
+                {start.toLocaleDateString(undefined, { month: 'short' })}
+              </ChooserCell>
+            );
+          })}
+        </fieldset>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className='flex items-center gap-0.5 pb-1'>
+        <IconButton
+          label='Previous year'
+          size='sm'
+          disabled={stepDisabled(-12)}
+          onClick={() => step(-12)}
+        >
+          <ChevronsLeft />
+        </IconButton>
+        <IconButton
+          label='Previous month'
+          size='sm'
+          disabled={stepDisabled(-1)}
+          onClick={() => step(-1)}
+        >
+          <ChevronLeft />
+        </IconButton>
+        <Button
+          variant='ghost'
+          size='sm'
+          tooltip='Choose month and year'
+          aria-haspopup='dialog'
+          aria-label={`${month.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}, choose month and year`}
+          className={`min-w-0 flex-1 gap-1 font-semibold ${TAP_TARGET_HEIGHT}`}
+          onClick={() => {
+            setChosenYear(month.getFullYear());
+            setView('years');
+          }}
+        >
+          <span className='truncate'>
+            {month.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}
+          </span>
+          <ChevronDown className='h-3.5 w-3.5 shrink-0 opacity-60' />
+        </Button>
+        <IconButton
+          label='Next month'
+          size='sm'
+          disabled={stepDisabled(1)}
+          onClick={() => step(1)}
+        >
+          <ChevronRight />
+        </IconButton>
+        <IconButton
+          label='Next year'
+          size='sm'
+          disabled={stepDisabled(12)}
+          onClick={() => step(12)}
+        >
+          <ChevronsRight />
+        </IconButton>
+      </div>
+      <DayPicker
+        mode='single'
+        selected={selected}
+        onSelect={onSelect}
+        month={month}
+        onMonthChange={(next) => onMonthChange(clampMonth(next, minDate, maxDate))}
+        hideNavigation
+        classNames={{ ...DAY_PICKER_CLASS_NAMES, month_caption: 'hidden' }}
+        components={{ DayButton: ThemedDayButton, Chevron: DayPickerChevron as never }}
+        disabled={disabledMatchers.length > 0 ? disabledMatchers : undefined}
+        startMonth={minDate}
+        endMonth={maxDate}
+      />
+    </div>
+  );
+}
+
 /**
- * Token-themed date picker on `@daypicker/react`. Replaces the bare
- * `<input type="date">` for the `FieldInput` `date` type — presents a calendar
- * popover on desktop and a bottom sheet on mobile (&lt;640 px), with full
- * keyboard navigation and screen-reader labels.
+ * Token-themed date picker on `@daypicker/react`. The field is a text input a person can
+ * TYPE a date into (`2015-12-05`, `12/5/2015`, `Dec 5 2015`, `December 5, 2015`, `5 Dec
+ * 2015`; a two-digit year reads as the nearest sensible century), normalized to ISO on
+ * blur or Enter — and a calendar button beside it opens a popover on desktop or a bottom
+ * sheet on mobile (&lt;640 px). In the calendar the month AND year step with buttons, the
+ * caption opens a year/month chooser, and PageUp/PageDown (Shift for a year) move the view.
  *
  * Value is an ISO date string (`'YYYY-MM-DD'`), matching what a native date
- * input produces, so it's drop-in compatible with existing RHF form schemas.
+ * input produces, so it's drop-in compatible with existing RHF form schemas. Typed text that
+ * does not parse, or falls outside `min`/`max`, never reaches `onChange`: the field turns
+ * invalid with a short reason, and Escape restores the last good value.
  */
 export function DatePicker({
   value,
@@ -62,13 +317,60 @@ export function DatePicker({
 }: DatePickerProps) {
   const [open, setOpen] = useState(false);
   const isMobile = useMediaQuery('(max-width: 639px)');
+  const [anchor, setAnchor] = useState<HTMLDivElement | null>(null);
+  const errorId = useId();
 
   const selectedDate = value ? isoToLocalDate(value) : undefined;
-  const defaultMonth = selectedDate ?? new Date();
+  const minDate = min ? isoToLocalDate(min) : undefined;
+  const maxDate = max ? isoToLocalDate(max) : undefined;
 
-  const disabledMatchers: Matcher[] = [];
-  if (min) disabledMatchers.push({ before: isoToLocalDate(min) });
-  if (max) disabledMatchers.push({ after: isoToLocalDate(max) });
+  // The text being typed, or null while the field just shows the value.
+  const [draft, setDraft] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [month, setMonth] = useState(() => clampMonth(selectedDate ?? new Date(), minDate, maxDate));
+
+  // A new value from outside (or a pick in the calendar) replaces whatever was being typed
+  // and moves the calendar's view to it. min/max only bound the clamp: the view moves when the
+  // value does, so they stay out of the dependency list.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: see above
+  useEffect(() => {
+    setDraft(null);
+    setError(null);
+    if (value) setMonth(clampMonth(isoToLocalDate(value), minDate, maxDate));
+  }, [value]);
+
+  const display = selectedDate ? formatDateDisplay(selectedDate) : '';
+  const inputText = draft ?? display;
+
+  const refuse = (reason: string) => {
+    setError(reason);
+    return false;
+  };
+
+  /** Parse the draft; on success call onChange once and return to the display form. */
+  const commitDraft = (): boolean => {
+    if (draft === null) return true;
+    if (draft.trim() === '') {
+      setDraft(null);
+      setError(null);
+      if (value) onChange?.(undefined);
+      return true;
+    }
+    const parsed = parseDateText(draft);
+    if (!parsed.ok) return refuse(parsed.reason);
+    const date = isoToLocalDate(parsed.iso);
+    if (minDate && date < minDate) {
+      return refuse(`Pick a date on or after ${formatDateDisplay(minDate)}`);
+    }
+    if (maxDate && date > maxDate) {
+      return refuse(`Pick a date on or before ${formatDateDisplay(maxDate)}`);
+    }
+    setDraft(null);
+    setError(null);
+    setMonth(clampMonth(date, minDate, maxDate));
+    if (parsed.iso !== value) onChange?.(parsed.iso);
+    return true;
+  };
 
   const handleSelect = (date: Date | undefined) => {
     onChange?.(date ? localDateToIso(date) : undefined);
@@ -78,76 +380,127 @@ export function DatePicker({
 
   const handleOpenChange = (next: boolean) => {
     setOpen(next);
-    if (!next) onBlur?.();
+    if (next) {
+      // Open on the typed date when the text is valid, else on the value.
+      setMonth(clampMonth(selectedDate ?? new Date(), minDate, maxDate));
+    } else onBlur?.();
   };
 
-  const triggerLabel = selectedDate ? formatDateDisplay(selectedDate) : placeholder;
+  const openCalendar = () => {
+    if (disabled) return;
+    if (draft !== null) {
+      const parsed = parseDateText(draft);
+      if (parsed.ok) setMonth(clampMonth(isoToLocalDate(parsed.iso), minDate, maxDate));
+    }
+    setOpen(true);
+  };
 
-  const trigger = (
-    <button
-      {...rest}
-      // guardrails-ignore no-raw-action-button: presentational popover/drawer trigger for
-      // the calendar (opens a picker, doesn't mutate) — styled as a field via
-      // fieldControlClass and needs to be a plain <button> to work as both the Popover
-      // and Drawer trigger.
-      type='button'
-      id={id}
-      name={name}
-      disabled={disabled}
-      aria-invalid={ariaInvalid}
-      aria-describedby={ariaDescribedBy}
-      aria-haspopup='dialog'
-      aria-expanded={open}
-      aria-label={selectedDate ? triggerLabel : placeholder}
-      onClick={() => setOpen(true)}
-      className={cn(RAW_BUTTON, 
-        fieldControlClass(size),
-        'flex cursor-pointer items-center justify-between text-left',
-        !selectedDate && 'text-field-placeholder',
-        disabled && 'cursor-not-allowed',
-      )}
-    >
-      <span>{triggerLabel}</span>
-      <Calendar className='h-4 w-4 shrink-0 opacity-50' />
-    </button>
+  const invalid = ariaInvalid || error !== null ? true : undefined;
+  const describedBy = [ariaDescribedBy, error ? errorId : undefined].filter(Boolean).join(' ');
+
+  const field = (
+    <div ref={setAnchor} className='relative w-full'>
+      <Input
+        {...rest}
+        type='text'
+        maxLength={64}
+        size={size}
+        id={id}
+        name={name}
+        disabled={disabled}
+        autoComplete='off'
+        spellCheck={false}
+        value={inputText}
+        placeholder={placeholder}
+        aria-invalid={invalid}
+        aria-describedby={describedBy || undefined}
+        onFocus={(e) => e.currentTarget.select()}
+        onChange={(e) => {
+          setDraft(e.target.value);
+          setError(null);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            commitDraft();
+          } else if (e.key === 'Escape' && (draft !== null || error !== null)) {
+            e.preventDefault();
+            e.stopPropagation();
+            setDraft(null);
+            setError(null);
+          } else if (e.key === 'ArrowDown' && e.altKey) {
+            e.preventDefault();
+            openCalendar();
+          }
+        }}
+        onBlur={(e) => {
+          commitDraft();
+          // Focus moving to the calendar button (or into its panel) is not the field being left.
+          const next = e.relatedTarget as Node | null;
+          if (!open && !(next && anchor?.contains(next))) onBlur?.();
+        }}
+        className='pr-11 pointer-coarse:pr-12'
+      />
+      <IconButton
+        size={size}
+        label={selectedDate ? `Change date, ${display}` : placeholder}
+        disabled={disabled}
+        aria-haspopup='dialog'
+        aria-expanded={open}
+        onClick={() => (open ? handleOpenChange(false) : openCalendar())}
+        className='absolute right-0 top-0 text-muted-foreground hover:text-foreground'
+      >
+        <Calendar className='opacity-70' />
+      </IconButton>
+    </div>
   );
 
+  const message = error ? (
+    <p id={errorId} role='alert' className='mt-1 text-xs text-field-error'>
+      {error}
+    </p>
+  ) : null;
+
   const calendar = (
-    <DayPicker
-      mode='single'
+    <DatePickerCalendar
       selected={selectedDate}
+      month={month}
+      onMonthChange={setMonth}
       onSelect={handleSelect}
-      defaultMonth={defaultMonth}
-      classNames={DAY_PICKER_CLASS_NAMES}
-      components={{ DayButton: ThemedDayButton, Chevron: DayPickerChevron as never }}
-      disabled={disabledMatchers.length > 0 ? disabledMatchers : undefined}
-      startMonth={min ? isoToLocalDate(min) : undefined}
-      endMonth={max ? isoToLocalDate(max) : undefined}
+      minDate={minDate}
+      maxDate={maxDate}
     />
   );
 
   if (isMobile) {
     return (
-      <>
-        {trigger}
+      <div className='w-full'>
+        {field}
+        {message}
         <Drawer open={open} onClose={() => handleOpenChange(false)} side='bottom' size='md'>
           <div className='flex justify-center py-2'>{calendar}</div>
         </Drawer>
-      </>
+      </div>
     );
   }
 
   return (
-    <Popover
-      trigger={trigger}
-      open={open}
-      onOpenChange={handleOpenChange}
-      align='start'
-      arrow={false}
-      width={280}
-    >
-      {calendar}
-    </Popover>
+    <div className='w-full'>
+      {field}
+      {message}
+      <Popover
+        anchor={anchor}
+        open={open}
+        onOpenChange={handleOpenChange}
+        align='start'
+        arrow={false}
+        // 🔴 Wide enough for the longest caption beside its four steppers: at 296 "September 2026"
+        // truncated to "September 20…" (photos' lightbox, forge task 3764). 320 still fits a 390px phone.
+        width={320}
+      >
+        {calendar}
+      </Popover>
+    </div>
   );
 }
 

package/src/react/components/InlineEditableText.spec.tsx

@@ -46,6 +46,35 @@ describe('InlineEditableText', () => {
     expect(getByText('Hello')).toBeDefined();
   });
 
+  test("selects the whole value by default, so typing replaces a title", () => {
+    const { getByRole } = render(<InlineEditableText value='Hello' onChange={() => {}} />);
+    fireEvent.click(getByRole('button'));
+    const input = getByRole('textbox') as HTMLInputElement;
+    expect([input.selectionStart, input.selectionEnd]).toEqual([0, 5]);
+  });
+
+  test("caret='end' puts the caret after the text and selects nothing, so a keystroke cannot replace paragraphs", () => {
+    const notes = 'First paragraph.\n\nSecond paragraph.';
+    const { getByRole } = render(
+      <InlineEditableText multiline caret='end' value={notes} onChange={() => {}} />,
+    );
+    fireEvent.click(getByRole('button'));
+    const area = getByRole('textbox') as HTMLTextAreaElement;
+    expect([area.selectionStart, area.selectionEnd]).toEqual([notes.length, notes.length]);
+  });
+
+  test('maxLength caps the editor (default 10,000)', () => {
+    const editorOf = (maxLength?: number) => {
+      const view = render(<InlineEditableText multiline maxLength={maxLength} value='x' onChange={() => {}} />);
+      fireEvent.click(view.getByRole('button'));
+      const cap = (view.getByRole('textbox') as HTMLTextAreaElement).maxLength;
+      cleanup();
+      return cap;
+    };
+    expect(editorOf()).toBe(10_000);
+    expect(editorOf(5000)).toBe(5000);
+  });
+
   test('read-only mode renders plain text and never an editor', () => {
     const { queryByRole, getByText } = render(
       <InlineEditableText value='Locked' canEdit={false} onChange={() => {}} />,

package/src/react/components/InlineEditableText.tsx

@@ -37,6 +37,16 @@ export interface InlineEditableTextProps {
    *   edit needs a separate, explicit affordance.
    */
   trigger?: 'text' | 'icon';
+  /**
+   * Where the caret lands when editing starts (default `'select-all'`):
+   * - `'select-all'` — the whole value is selected, so typing replaces it (a title, a name).
+   * - `'end'` — the caret goes after the last character and nothing is selected; for
+   *   paragraphs someone ADDS to (notes, a description), where one stray keystroke
+   *   would otherwise replace everything they wrote.
+   */
+  caret?: 'select-all' | 'end';
+  /** The editor's character ceiling (default 10,000) — the server's limit, so the editor stops where a save would be refused. */
+  maxLength?: number;
   ariaLabel?: string;
 }
 
@@ -46,7 +56,7 @@ export interface InlineEditableTextProps {
  * primitive, used anywhere a title/heading should be edited in place. Fully
  * token-driven (accent border + ring on the editor); the editor focuses and
  * selects its text on mount so typing replaces (and the cursor is never stranded
- * at position 0).
+ * at position 0) — or, with `caret='end'`, puts the caret after the text.
  */
 export function InlineEditableText({
   value,
@@ -58,6 +68,8 @@ export function InlineEditableText({
   inputClassName,
   trigger = 'text',
   wrap = true,
+  caret = 'select-all',
+  maxLength = 10_000,
   ariaLabel,
   ...rest
 }: InlineEditableTextProps) {
@@ -81,15 +93,19 @@ export function InlineEditableText({
     setEditing(false);
   };
 
-  // Focus + select-all as soon as the editor mounts (it only renders while editing).
-  // MUST be identity-stable: an inline ref callback gets detached/re-attached on every
+  // Focus + select-all (or caret-at-end) as soon as the editor mounts (it only renders while
+  // editing). MUST be identity-stable: an inline ref callback gets detached/re-attached on every
   // render, so each keystroke's setDraft re-render would re-run el.select() and the next
   // character would replace everything typed so far (one-character-survives bug).
-  const focusOnMount = useCallback((el: HTMLInputElement | HTMLTextAreaElement | null) => {
-    if (!el) return;
-    el.focus();
-    el.select();
-  }, []);
+  const focusOnMount = useCallback(
+    (el: HTMLInputElement | HTMLTextAreaElement | null) => {
+      if (!el) return;
+      el.focus();
+      if (caret === 'end') el.setSelectionRange(el.value.length, el.value.length);
+      else el.select();
+    },
+    [caret],
+  );
 
   if (editing) {
     const editorClass = cn(
@@ -104,7 +120,7 @@ export function InlineEditableText({
           ref={focusOnMount}
           aria-label={ariaLabel}
           className={cn(editorClass, 'resize-none')}
-          maxLength={10_000}
+          maxLength={maxLength}
           value={draft}
           onChange={(e) => setDraft(e.target.value)}
           onBlur={commit}
@@ -125,7 +141,7 @@ export function InlineEditableText({
         ref={focusOnMount}
         aria-label={ariaLabel}
         className={editorClass}
-        maxLength={10_000}
+        maxLength={maxLength}
         value={draft}
         onChange={(e) => setDraft(e.target.value)}
         onBlur={commit}

package/src/react/components/suggestionList.tsx

@@ -3,7 +3,7 @@
 import { Autocomplete } from '@base-ui/react/autocomplete';
 import type { ReactNode } from 'react';
 import { cn } from '../lib/cn.js';
-import { FLOATING_COLLISION_PADDING,
+import { BASE_UI_POSITIONER, FLOATING_COLLISION_PADDING,
   FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles.js';
 
 /**
@@ -32,7 +32,7 @@ export function SuggestionList<S>({
       <Autocomplete.Positioner
         sideOffset={4}
         collisionPadding={FLOATING_COLLISION_PADDING}
-        className='z-[var(--z-popover)]'
+        className={BASE_UI_POSITIONER}
       >
         <Autocomplete.Popup
           className={cn(