Interactions

import {
  ContentScaleInsets,
  State,
  VisualState,
  getContentScaleForState,
} from '@wearables-ui-toolkit/mrbd';
import {
  DefaultContentScaleInsets,
  getDefaultContentScaleForState,
} from '@wearables-ui-toolkit/foundation';
import type {
  InteractionState,
  Platform,
} from '@wearables-ui-toolkit/mrbd';
import type {ContentScaleForStateFn} from '@wearables-ui-toolkit/foundation';

import {Container, State, VisualState} from '@wearables-ui-toolkit/mrbd';
import type {InteractionState} from '@wearables-ui-toolkit/mrbd';

function StatusTile() {
  return (
    <Container
      clickable
      onActivate={openStatus}
      ariaLabel="Status"
      visualStateForInteractionStateFn={(interaction: InteractionState) => {
        // Render nothing at rest; light up only on focus and press.
        if (interaction.isDisabled) {
          return VisualState.DEFAULT;
        }
        switch (interaction.state) {
          case State.FOCUSED:
            return VisualState.FOCUSED;
          case State.PRESSED:
            return VisualState.PRESSED;
          default:
            return VisualState.NONE;
        }
      }}
    >
      <StatusContent />
    </Container>
  );
}

import {Container, State} from '@wearables-ui-toolkit/mrbd';
import type {InteractionState} from '@wearables-ui-toolkit/mrbd';
import {useState} from 'react';

function LabelledTarget() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="labelled-target">
      <Container
        clickable
        ariaLabel="Capture"
        onActivate={capture}
        onStateChange={(_previous: InteractionState, next: InteractionState) => {
          setIsActive(next.state !== State.DEFAULT);
        }}
      >
        <CaptureGlyph />
      </Container>
      <CaptureCaption isEmphasized={isActive} />
    </div>
  );
}

interface InteractionState {
  state: State;
  isDisabled: boolean;
}

type Platform = 'mrbd';

ContentScaleInsets[platform][state].horizontal;

type ContentScaleForStateFn = (
  state: State,
  containerSize: {width: number; height: number},
) => number;

• Disabled is orthogonal to state. A disabled control reports DEFAULT, FOCUSED, or PRESSED with isDisabled: true. It remains focusable so directional navigation does not leave a hole in the layout, and it renders its resting visual state at the disabled opacity.
• Default mapping. Unless a component overrides the mapping, DEFAULT maps to VisualState.DEFAULT, FOCUSED maps to VisualState.FOCUSED, PRESSED maps to VisualState.PRESSED, and every disabled state maps to VisualState.DEFAULT.
• NONE is a material decision, not a logical state. No control reports NONE as its logical state. A component or material selects it to suppress drawing, as StaticContainer does for its NONE background style.
• Press feedback has a minimum duration. The toolkit briefly holds the pressed visual state after an immediate release so a fast tap remains visible. Programmatic activation without a pointer press produces the same brief pulse.
• Fast focus movement snaps the transition. The toolkit classifies focus changes in quick succession, such as a sweep down a long list, as fast movement. Material-backed components apply those state changes without animation so the sweep does not create overlapping transitions. This classification is shared across the application and decays shortly after the sweep stops. Entering the pressed state resets fast-movement decay, but the most recent focus interval can remain classified as fast, so a press during the sweep can still snap.
• Zero and negative sizes are safe. A content-scale lookup for an element without a measured width returns full size instead of a fabricated scale. This prevents a component from animating out of an invalid resting scale on first paint.
• A visible tooltip can mask focus state. When an interactable uses tooltipHidesFocusState, onStateChange reports DEFAULT while the tooltip is open. This keeps the anchor from rendering focus under the tooltip. The control still owns focus; only its reported state is masked.

• Read InteractionState in onStateChange when a sibling needs to follow a control’s state.
• Use VisualState when authoring a material or custom state mapping.
• Prefer exported members over their raw string values for type safety and consistency.
• Handle isDisabled before switching on state in a custom mapping.

• Avoid a parallel state machine for focus and press. The interactable owns that behavior so input and visual feedback remain aligned.
• Do not force a visual state to imitate focus. Drive focus appearance from real interaction so assistive technology, directional navigation, and visuals agree.
• Treat disabled as the separate isDisabled flag, not as a fourth State member.
• Use ContentScaleInsets for resting and pressed insets instead of defining new values, so controls share the same breathing rhythm.