@astryxdesign/core 0.5.2-canary.2da7a39 → 0.5.2-canary.2e51213

package/src/Typeahead/BaseTypeahead.tsx

@@ -27,12 +27,15 @@ import React, {
   type RefObject,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {useBusyIndicatorLane} from './busyIndicatorLane';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {usePopover} from '../Popover/usePopover';
 import {useAnnounce} from '../hooks/useAnnounce';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {isImeKeyEvent} from '../utils/ime';
 import {TypeaheadItem} from './TypeaheadItem';
 import {Icon} from '../Icon';
+import {Spinner} from '../Spinner';
 import {
   colorVars,
   spacingVars,
@@ -310,10 +313,15 @@ const styles = stylex.create({
     fontSize: typeScaleVars['--text-supporting-size'],
     color: colorVars['--color-text-secondary'],
   },
-  loadingSpinner: {
+  // The indicator a direct caller gets. In flow, where it has always been, so
+  // it reserves its own width and the input's text never runs under it.
+  // Typeahead and Tokenizer take the indicator over and paint it in their own
+  // inline-end lane instead; this is what renders for everyone else.
+  loadingStatus: {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
+    flexShrink: 0,
     padding: spacingVars['--spacing-1'],
   },
 });
@@ -424,6 +432,40 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   const [isLoading, setIsLoading] = useState(false);
   const [hasSearched, setHasSearched] = useState(false);
 
+  // Report the busy state to a wrapper that has taken the indicator over.
+  //
+  // Through a ref, and at the call site rather than from an effect: an effect
+  // would run after this component had already committed, so the wrapper's
+  // own state change landed in a second commit — two renders of the whole
+  // field per transition, four across a search. Called here, the wrapper's
+  // setState batches with ours into the one commit that React was already
+  // doing. The ref keeps the identity of a caller's inline arrow from
+  // mattering, and the guard makes the report edge-triggered: the redundant
+  // `false` on every keystroke below the query threshold reports nothing.
+  //
+  // The ref is synced in a layout effect rather than during render, following
+  // `onMotionStartRef` in BottomSheetPanel — a render that React discards
+  // must not leave the ref pointing at the callback from the abandoned pass.
+  // This effect only writes a ref, so it commits nothing and no wrapper
+  // re-renders for it; every caller of `setLoading` runs from an event or an
+  // awaited continuation, long after the first commit.
+  // A wrapper that owns the inline-end lane subscribes through context; see
+  // busyIndicatorLane.tsx for why this is not a prop.
+  const busyLane = useBusyIndicatorLane();
+  const onLoadingChangeRef = useRef(busyLane?.onBusyChange);
+  useIsomorphicLayoutEffect(() => {
+    onLoadingChangeRef.current = busyLane?.onBusyChange;
+  }, [busyLane]);
+  const loadingRef = useRef(false);
+  const setLoading = useCallback((next: boolean) => {
+    if (loadingRef.current === next) {
+      return;
+    }
+    loadingRef.current = next;
+    setIsLoading(next);
+    onLoadingChangeRef.current?.(next);
+  }, []);
+
   // Track active pointer to defer popover.show() past click events.
   // With popover="auto", showing the popover between pointerdown and
   // pointerup/click causes the browser's light-dismiss to immediately
@@ -499,7 +541,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
       // in-flight response for an older query fails the gen check below
       // instead of overwriting the newer results.
       const gen = ++searchGenRef.current;
-      setIsLoading(true);
+      setLoading(true);
       setHasSearched(true);
       try {
         const searchResults = await searchSource.search(searchQuery);
@@ -534,7 +576,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         setHighlightedIndex(-1);
       } finally {
         if (searchGenRef.current === gen) {
-          setIsLoading(false);
+          setLoading(false);
         }
       }
     },
@@ -545,37 +587,68 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
       announce,
       emptySearchResultsText,
       __queryEntries,
+      setLoading,
       t,
     ],
   );
 
-  // Perform bootstrap
-  const performBootstrap = useCallback(async () => {
-    const gen = ++searchGenRef.current;
-    setIsLoading(true);
-    try {
-      const bootstrapResults = await searchSource.bootstrap();
+  const applyBootstrapResults = useCallback(
+    (bootstrapResults: T[], gen: number) => {
       if (searchGenRef.current !== gen) {
         return;
       }
       resultsGenRef.current = gen;
       const shown = bootstrapResults.slice(0, maxMenuItems);
+      const nextHighlightedIndex = shown.length > 0 ? 0 : -1;
+      if (
+        results.length === 0 &&
+        shown.length === 0 &&
+        highlightedIndex === -1
+      ) {
+        return;
+      }
       setResults(shown);
-      setHighlightedIndex(shown.length > 0 ? 0 : -1);
+      setHighlightedIndex(nextHighlightedIndex);
       if (bootstrapResults.length > 0) {
         showLayer();
       }
+    },
+    [highlightedIndex, maxMenuItems, results.length, showLayer],
+  );
+
+  // Perform bootstrap
+  const performBootstrap = useCallback(async () => {
+    const gen = ++searchGenRef.current;
+    let bootstrapResult: T[] | Promise<T[]>;
+    try {
+      bootstrapResult = searchSource.bootstrap();
     } catch {
-      if (searchGenRef.current !== gen) {
-        return;
+      if (searchGenRef.current === gen) {
+        setResults([]);
+        setLoading(false);
+      }
+      return;
+    }
+
+    if (Array.isArray(bootstrapResult)) {
+      setLoading(false);
+      applyBootstrapResults(bootstrapResult, gen);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      applyBootstrapResults(await bootstrapResult, gen);
+    } catch {
+      if (searchGenRef.current === gen) {
+        setResults([]);
       }
-      setResults([]);
     } finally {
       if (searchGenRef.current === gen) {
-        setIsLoading(false);
+        setLoading(false);
       }
     }
-  }, [searchSource, maxMenuItems, showLayer]);
+  }, [searchSource, applyBootstrapResults, setLoading]);
 
   // Handle query change
   const handleQueryChange = useCallback(
@@ -608,7 +681,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         // its own `finally` will decline to clear this — so clear it here or
         // the field spins forever. Backspacing below the threshold on a remote
         // source is the everyday way to hit that.
-        setIsLoading(false);
+        setLoading(false);
         // Clear any lingering result-count / no-results announcement.
         announce('');
         if (derived.length > 0) {
@@ -645,6 +718,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
       debounceMs,
       searchSource,
       announce,
+      setLoading,
     ],
   );
 
@@ -673,11 +747,11 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
       // Same reason as in handleQueryChange: the invalidated search will not
       // clear this itself. Selecting a stale result while the next search is
       // still in flight would otherwise leave the field spinning.
-      setIsLoading(false);
+      setLoading(false);
       popover.hide();
       inputRef.current?.focus();
     },
-    [onChange, popover, searchSource],
+    [onChange, popover, searchSource, setLoading],
   );
 
   // Handle focus
@@ -889,6 +963,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
             : undefined
         }
         aria-autocomplete="list"
+        aria-busy={isLoading || undefined}
         aria-describedby={ariaDescribedBy}
         aria-labelledby={ariaLabelledBy}
         aria-disabled={isFocusableDisabled ? 'true' : undefined}
@@ -923,15 +998,11 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
           inputXStyle,
         )}
       />
-      {isLoading && (
-        <span
-          role="status"
-          aria-label={t('@astryx.typeahead.loading')}
-          {...stylex.props(styles.loadingSpinner)}>
-          <Icon icon="clock" size="sm" color="secondary" />
+      {isLoading && busyLane == null && (
+        <span {...stylex.props(styles.loadingStatus)}>
+          <Spinner size="sm" aria-label={t('@astryx.typeahead.loading')} />
         </span>
       )}
-
       {popover.render(
         <div
           id={listboxId}

package/src/Typeahead/Typeahead.doc.mjs

@@ -1,5 +1,91 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
+const anatomy = [
+  {
+    name: 'Field',
+    required: false,
+    description:
+      'Standalone Field shell that provides the label and optional supporting content; omitted inside InputGroup.',
+  },
+  {
+    name: 'Input surface',
+    required: true,
+    description:
+      'Painted control surface containing the editable input or the selected token.',
+  },
+  {
+    name: 'Icon-rendered start icon',
+    required: false,
+    description:
+      'Optional leading semantic icon or icon component rendered through Icon.',
+  },
+  {
+    name: 'Caller-rendered start content',
+    required: false,
+    description:
+      'Optional arbitrary React content rendered directly at the start of the input surface.',
+  },
+  {
+    name: 'Selected token',
+    required: false,
+    description:
+      'Token that presents the selected item while the control is not in edit mode.',
+  },
+  {
+    name: 'Spinner',
+    required: false,
+    description:
+      'Loading indicator shown at the end of the input surface while a search is in flight.',
+  },
+  {
+    name: 'Clear button',
+    required: false,
+    description:
+      'Shared clear action that removes the selected item when hasClear is enabled.',
+  },
+  {
+    name: 'Dropdown',
+    required: false,
+    description:
+      'Anchored listbox surface containing the current search results.',
+  },
+  {
+    name: 'Empty state',
+    required: false,
+    description: 'Message shown after a completed search returns no results.',
+  },
+  {
+    name: 'Result row',
+    required: false,
+    description:
+      'Stable option wrapper that owns highlight, selection, pointer, and keyboard behavior.',
+  },
+  {
+    name: 'Default item content',
+    required: false,
+    description:
+      'Standard TypeaheadItem label and supporting content rendered inside a result row when renderItem and item.element are absent.',
+  },
+  {
+    name: 'Caller-rendered item content',
+    required: false,
+    description:
+      'Caller-owned result content supplied through renderItem or item.element inside the stable result row.',
+  },
+  {
+    name: 'Result group heading',
+    required: false,
+    description: 'Visible heading for a labeled group of result rows.',
+  },
+  {
+    name: 'Selected result state',
+    required: false,
+    description:
+      'Selected styling and trailing check presented on the current result row.',
+  },
+];
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
@@ -86,7 +172,8 @@ export const docs = {
     {
       name: 'minQueryLength',
       type: 'number',
-      description: 'Minimum query length before the search source is queried. Below it no search runs and the menu stays closed.',
+      description:
+        'Minimum query length before the search source is queried. Below it no search runs and the menu stays closed.',
       default: '1',
     },
     {
@@ -199,6 +286,7 @@ export const docs = {
     ],
   },
   usage: {
+    anatomy,
     description:
       'A searchable input for selecting a single item from a large or dynamic dataset. Results appear as the user types, with support for async data sources, debounced search, and custom item rendering. Use it when the option list is too large for a Selector dropdown.',
     bestPractices: [

package/src/Typeahead/Typeahead.spec.md

@@ -0,0 +1,257 @@
+---
+schema_version: 3
+template_version: 3
+kind: component
+id: component:Typeahead
+authority: draft
+archive_reason: null
+superseded_by: null
+approved_by: null
+approved_at: null
+owners: [cixzhang]
+review_triggers: [theming]
+verified_by:
+  [
+    packages/core/src/Typeahead/Typeahead.test.tsx,
+    packages/core/src/Typeahead/TypeaheadItem.test.tsx,
+    packages/core/src/Field/Field.test.tsx,
+    packages/core/src/Token/Token.test.tsx,
+    packages/core/src/Icon/Icon.test.tsx,
+    scripts/check-knowledge.mjs,
+  ]
+modules: []
+families: [family:input-fields, family:overlay-dismissal]
+design_specs: []
+architecture:
+  [architecture:component-theming-surface, architecture:layer-runtime]
+contributing: []
+system_specs: []
+---
+
+# Typeahead component contract
+
+## Intent
+
+Typeahead renders a single-selection search control with an optional standalone
+Field shell and delegates its combobox engine and popup results to BaseTypeahead. This draft records current
+consumer anatomy, target reachability, and the shipped difference between the
+stable result row and its default TypeaheadItem content without changing runtime
+behavior, styling, targets, or public API.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: additive documentation only; runtime, DOM, styling,
+  targets, and public API remain unchanged
+- Controlled/uncontrolled behavior: unchanged
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The painted Input surface and its current `typeahead` target.
+- The Dropdown and Empty state rendered by BaseTypeahead and their current
+  `typeahead-dropdown` and `typeahead-empty-state` targets.
+- Default item content rendered by TypeaheadItem and its current
+  `typeahead-item` target.
+- The stable outer Result row, Result group heading, and Selected result state,
+  which currently have no Typeahead target.
+
+**Does not own / non-goals**
+
+- Standalone field-shell presentation — rendered by Field and themed through
+  Field's current `field` target; omitted when Typeahead is inside InputGroup.
+- The Selected token — rendered by Token and themed through Token's current
+  `token` target.
+- The Clear button — rendered by Field's InputClearButton and themed through
+  Field's current `input-clear-button` target.
+- Loading-indicator presentation — owned by `component:Spinner`. Typeahead
+  decides only where the indicator sits.
+- General Icon presentation for an Icon-rendered start icon.
+- Arbitrary ReactNode start or item content supplied by the caller.
+- A target/state for the outer Result row, Result group heading, or selected-row
+  concept; none exists on current `main`.
+- Shared layer lifecycle, positioning, and dismissal behavior.
+
+## Public concepts
+
+No new public concept is introduced. Consumer props and usage remain documented
+in `Typeahead.doc.mjs`; BaseTypeahead and TypeaheadItem retain their existing
+public component documentation.
+
+## Behavioral and layout contract
+
+| ID  | Candidate invariant                                                                                                                                                                                                                                                                                       | Basis                           | Draft review state                                 |
+| --- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------- |
+| FR1 | The current standalone presentation contains a Field and painted Input surface; the supported InputGroup path renders the same Input surface without a Field. The surface contains an editable input when unselected or editing, and a Selected token plus collapsed input when selected and not editing. | Current source, docs, and tests | Verified current behavior; no normalization        |
+| FR2 | Input surface, Dropdown, Empty state, and Default item content carry the four current Typeahead targets documented in `Typeahead.doc.mjs`.                                                                                                                                                                | Current source, docs, and tests | Verified current behavior; no target change        |
+| FR3 | Every result, whether default or caller-rendered, sits inside the same stable outer Result row that owns option semantics, highlight, selected styling, pointer interaction, and keyboard indexing.                                                                                                       | Current source and tests        | Verified current behavior; no new behavior decided |
+| FR4 | `typeahead-item` reaches only the standard TypeaheadItem label/supporting-content branch inside a Result row. A custom `renderItem` branch or caller-provided `item.element` does not receive that target, and no branch gives the outer Result row a Typeahead target.                                   | Current source and owner tests  | Verified current asymmetry; no normalization       |
+| FR5 | Result group heading and Selected result state are stable visible concepts but no current Typeahead target reaches them. The selected check uses a generic Icon, which does not expose a Typeahead-specific selected-row selector.                                                                        | Current source                  | Verified factual reachability gaps                 |
+| FR6 | When present, Field, Selected token, Clear button, Spinner, and Icon-rendered start icon retain their Field, Token, Spinner, and Icon theming owners; arbitrary ReactNode start and item content stays caller-owned.                                                                                      | Current composition and owners  | Verified current behavior; no target change        |
+
+### Allowed variation
+
+- Standalone Typeahead renders Field; the supported InputGroup path omits it.
+- The Input surface shows an editable input while empty or editing and a Token
+  while a selected value is not being edited. This shipped asymmetry is recorded,
+  not normalized into a new shared part or target.
+- A Result row may contain standard TypeaheadItem content, custom `renderItem`
+  content, or a caller-provided `item.element`. Only the standard TypeaheadItem
+  label/supporting-content branch carries `typeahead-item`.
+- Results may be ungrouped or grouped. Group wrappers and headings do not gain a
+  target from that variation.
+- Semantic names and icon component types render through Icon. Arbitrary ReactNode
+  start content renders directly and stays caller-owned.
+
+### Representative states
+
+| State                         | Required invariant                                                                                 | Allowed variation                                                       |
+| ----------------------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| Standalone or InputGroup      | Field is present only standalone; Input surface anatomy and targets remain the same in both paths. | InputGroup owns grouped layout and labeling support.                    |
+| Empty or editing              | Editable input remains inside the `typeahead` Input surface.                                       | Query, loading state, and popup visibility may vary.                    |
+| Selected and not editing      | Token owns the selected-value presentation while the input is collapsed.                           | Clear button may be present according to `hasClear` and disabled state. |
+| Results with default renderer | Outer Result row remains untargeted; inner TypeaheadItem carries `typeahead-item`.                 | Item label, icon/avatar, and description may vary.                      |
+| Results with custom renderer  | Outer Result row remains untargeted; custom content receives no `typeahead-item`.                  | Caller owns the inner result content.                                   |
+| Grouped and selected results  | Group heading and selected-row concept remain untargeted by Typeahead.                             | A generic Icon paints the selected check.                               |
+| Empty completed search        | Empty state carries `typeahead-empty-state` inside the Dropdown.                                   | Consumer-supplied empty text may vary.                                  |
+
+### Transformation and precedence order
+
+- No new query, search-result, selection, edit-mode, or styling precedence rule is
+  introduced.
+
+### Performance and resources
+
+- No new performance or resource rule is introduced.
+
+## Accessibility contract
+
+This draft does not change or extend Typeahead's existing field, combobox,
+listbox, option, live-region, focus, or dismissal behavior.
+
+## Design relationships
+
+| Anatomy or state              | Design requirement                                                                                     | Representation authority       | Hierarchy role    | Component contract |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- | ------------------ |
+| Field                         | Provides the label and optional supporting content outside InputGroup; omitted inside InputGroup.      | Field component                | Supporting        | FR1, FR6           |
+| Input surface                 | Paints the control around the editable input or selected token.                                        | Current source and public docs | Prominent         | FR1, FR2           |
+| Icon-rendered start icon      | Presents a semantic or component icon through Icon.                                                    | Icon component                 | Supporting        | FR6                |
+| Caller-rendered start content | Presents arbitrary caller content directly in the input surface's start slot.                          | Caller-supplied content        | Context-dependent | FR6                |
+| Selected token                | Presents the selected value outside edit mode through Token.                                           | Token component                | Prominent         | FR1, FR6           |
+| Spinner                       | Indicates a search in flight, at the end of the input surface.                                         | Spinner component              | Supporting        | FR6                |
+| Clear button                  | Removes the selected value through the shared field clear action.                                      | Field component                | Supporting        | FR6                |
+| Dropdown                      | Paints the anchored listbox surface containing results or Empty state.                                 | Current source and public docs | Prominent         | FR2                |
+| Empty state                   | Presents the no-results message after a completed empty search.                                        | Current source and public docs | Prominent         | FR2                |
+| Result row                    | Owns option semantics, interaction, highlight, selection styling, and keyboard index for every result. | Current source and tests       | Prominent         | FR3, FR4           |
+| Default item content          | Presents the standard TypeaheadItem label and optional supporting content inside a Result row.         | TypeaheadItem component        | Prominent         | FR2, FR4           |
+| Caller-rendered item content  | Presents custom `renderItem` or `item.element` content inside the stable Result row.                   | Caller-supplied content        | Context-dependent | FR3, FR4, FR6      |
+| Result group heading          | Labels a visible group of Result rows.                                                                 | Current source                 | Supporting        | FR5                |
+| Selected result state         | Presents selected row weight and a trailing check without a Typeahead-specific target or target state. | Current source                 | Supporting        | FR5                |
+
+The current target placement is asymmetric: `typeahead-item` is on default inner
+TypeaheadItem content, while the stable outer Result row owns interaction and state
+for both default and custom content. Group headings and the selected-result concept
+are also untargeted. This record preserves those facts and does not move, add, or
+normalize targets.
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Field": {"delegatesTo": {"owner": "component:Field", "target": "field"}},
+  "Input surface": {"target": "typeahead"},
+  "Icon-rendered start icon": {
+    "delegatesTo": {"owner": "component:Icon", "target": "icon"}
+  },
+  "Caller-rendered start content": {
+    "none": {
+      "reason": "intentional: Arbitrary ReactNode content is caller-owned and receives no Typeahead target."
+    }
+  },
+  "Selected token": {
+    "delegatesTo": {"owner": "component:Token", "target": "token"}
+  },
+  "Spinner": {
+    "delegatesTo": {"owner": "component:Spinner", "target": "spinner"}
+  },
+  "Clear button": {
+    "delegatesTo": {
+      "owner": "component:Field",
+      "target": "input-clear-button"
+    }
+  },
+  "Dropdown": {"target": "typeahead-dropdown"},
+  "Empty state": {"target": "typeahead-empty-state"},
+  "Result row": {
+    "none": {
+      "reason": "reachability-gap: The stable outer option row owns interaction and state but has no current Typeahead target."
+    }
+  },
+  "Default item content": {"target": "typeahead-item"},
+  "Caller-rendered item content": {
+    "none": {
+      "reason": "intentional: Custom renderItem and item.element content is caller-owned and does not receive the standard TypeaheadItem target."
+    }
+  },
+  "Result group heading": {
+    "none": {
+      "reason": "reachability-gap: No current public target reaches the visible result-group heading."
+    }
+  },
+  "Selected result state": {
+    "none": {
+      "reason": "reachability-gap: No current Typeahead target or target state reaches the outer selected row and its selection concept."
+    }
+  }
+}
+```
+
+## Family and system relationships
+
+- `architecture:component-theming-surface` owns anatomy qualification, local
+  target mapping, delegation, and factual `none` dispositions.
+- `architecture:layer-runtime` owns the current Popover host, positioning, native
+  light-dismiss, and visibility reconciliation used by the Dropdown.
+- `family:overlay-dismissal` owns shared Escape and platform-close ordering;
+  Typeahead participates through its composed Popover owner.
+- Field, Token, and Icon retain ownership of their delegated targets and
+  presentation.
+
+## Verification map
+
+| Contract            | Verification                                                                          | Representative states                                              | Mutation or failure expectation                                                             | Audit section             |
+| ------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------- |
+| FR1, FR6            | `Typeahead.test.tsx`, owner tests, and Typeahead composition source                   | Standalone/InputGroup, empty, editing, selected, clear, start icon | A documented composed part disappears, gains the wrong owner, or misreports Field presence. | `audit:Typeahead/anatomy` |
+| FR2                 | Source inspection, target inventories, empty-state test, and `TypeaheadItem.test.tsx` | Input, open Dropdown, empty search, default item                   | A current target is missed, invented, or documented on an element that does not carry it.   | `audit:Typeahead/theming` |
+| FR3, FR4, FR5       | BaseTypeahead source and result/group/selection tests                                 | Default/custom result, grouped result, selected row                | The record hides the outer/inner asymmetry or claims reachability that current code lacks.  | `audit:Typeahead/theming` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                                         | Canonical anatomy and current target inventory                     | Missing, extra, prefixed, stale, or multiply assigned mappings fail repository validation.  | `audit:Typeahead/theming` |
+
+Existing tests directly assert Empty state and TypeaheadItem target presence,
+selected-value Token behavior, result semantics, selection state, and standalone
+Field content. Source inspection confirms InputGroup's Field omission and, with
+public target inventories, provides the current Input surface and Dropdown target
+evidence. No test is represented here as proof of a target it does not directly
+assert.
+
+## Decision log
+
+None. This draft records current facts and introduces no component-local design,
+API, theming, or layer-system decision.
+
+## Open questions
+
+- **OQ1 — Should the stable Result row, Result group heading, or Selected result
+  state gain a public Typeahead target?** (`human-api`) Their current lack of
+  reachability is an audit gap, not settled intent. This draft does not normalize
+  the existing outer-row/default-content asymmetry.
+
+## Content boundary
+
+This file does not duplicate consumer prop tables, examples, search algorithms,
+implementation steps, or shared layer and theming rules. It links to their owners.