All Behaviors

Focus, selection, popups and the other pieces your components are made of.

Browse the helpers by topic. Each name links to its guide and examples.

Import helpers from @ui-sdk/core unless a different entrypoint is shown.

Focus and Keys

Helper	What It Does
`createRovingFocus`	Gives a group one Tab stop and moves focus with the arrow keys.
`createGridFocus`	Moves focus by row and column, including cells that aren't rendered yet.
`byCell`	Updates only the cell focus leaves and the cell it lands on.
`spatialMove`	Chooses the next item from its position on screen.
`nearestInDirection`	Finds the nearest item in a direction without moving focus.
`createTypeahead`	Finds an item as someone types its name.
`createFocusRecovery`	Restores focus when the focused item is removed.
`keepFocus`	Preserves focus through a change that moves an element.
`inputHints`	Picks the on-screen keyboard and autofill for a kind of field.

Text

Helper	What It Does
`createInputHistory`	Brings back earlier entries with ArrowUp and ArrowDown, like a terminal.
`isTypeaheadKey`	Checks whether a key can be used for typeahead.
`labelOf`	Reads an element's label for matching typed text.
`isComposing`	Checks whether an input event is part of text that's still being composed.
`pageLocale`	Reads the language of the page, or of one section of it.
`userLocale`	Reads the browser's preferred language.
`toLocale`	Turns a tag like `en_US` into one that `Intl` accepts.

Search Matching

Import these helpers from @ui-sdk/core/text-match.

Helper	What It Does
`fuzzyScore`	Scores how well a piece of text matches what someone typed.
`matchRanges`	Finds where the typed text appears in a piece of text.
`matchSegments`	Splits text into matched and unmatched pieces you can render.

Selection

Helper	What It Does
`createSelection`	Tracks selected items, including multiple selections and ranges.
`createLasso`	Selects items touched by a rectangle drawn with the pointer.
`createCellRange`	Selects a rectangular range of grid cells.
`byCellRange`	Updates only the cells that join or leave a range.
`cellRangeMessage`	Provides the default announcements for a range of cells.
`cellsToText`	Converts cell values to text for copying.
`textToCells`	Parses pasted text into rows of cell values.

Drag and Drop

Helper	What It Does
`bindDrag`	Tracks a pointer drag with capture, thresholds, and cancellation.
`dragThreshold`	Sets the standard drag threshold to 3 pixels.
`createReorder`	Reorders a list or grid with the pointer or keyboard.
`createTreeReorder`	Reorders and nests tree items with their descendants.
`createTransfer`	Moves items within or between lists.
`bindDragPreview`	Shows a copy of the dragged element above the page.
`createAutoScroll`	Scrolls a container when a drag approaches its edge.
`settleDraft`	Keeps a draft visible while a controlled value catches up.
`reorderMessage`	Provides the default announcements for reordering a list.
`subtreeEnd`	Finds the first row index after a subtree.
`treeReorderMessage`	Provides the default announcements for reordering a tree.
`transferMessage`	Provides the default announcements for moving items between lists.

Dragging and Resizing

Helper	What It Does
`createMove`	Moves freely positioned objects with the pointer or keyboard.
`createResize`	Resizes boxes from their edges and corners.
`createSwipeActions`	Reveals actions behind a row and supports full-swipe actions.
`bindHold`	Runs an action once a press is held, and can repeat it while held.
`bindRepeat`	Steps once when a button is pressed, and keeps stepping while held.
`createArea`	Picks a value along two axes, such as a point on a pad.
`createSpans`	Draws, moves, and resizes ranges on tracks.
`stackSpans`	Places overlapping ranges in separate lanes.
`createPreview`	Tracks a value being tried before it is chosen.
`moveMessage`	Provides the default announcements for changes in position.
`resizeMessage`	Provides the default announcements for resizing boxes.
`isSpanFree`	Checks whether a proposed range overlaps another on its track.
`spansMessage`	Provides the default announcements for changes to ranges.

Lists

Helper	What It Does
`createListbox`	Highlights options with the arrow keys, and filters them as someone types.
`createVirtualizer`	Calculates which rows to render and where to place them.
`createStickToBottom`	Follows new content while preserving the reader's place when they scroll up.
`bindScrollPicker`	Picks the option at the center of a scrolling list, like a wheel.
`createInlineEdit`	Manages editing, committing, and canceling a value in place.

Trees

Helper	What It Does
`createTreeCollection`	Looks up parents, children, levels, and visible nodes.
`treeDataNodes`	Converts nested items into nodes for a tree collection.
`treeFromPaths`	Builds nested tree data from file paths.
`visibleTreeRows`	Flattens open branches into rows with parent, level, and index data.
`treeCheckedStates`	Calculates checked, unchecked, and mixed states across a tree.
`toggleTreeChecked`	Returns the next checked value when a node is toggled.

Transitions and Gestures

Helper	What It Does
`bindPanel`	Coordinates panel height, transitions, and focus when opening or closing.
`hiddenAttrs`	Sets visibility attributes for hidden or searchable content.
`bindFindable`	Reveals hidden content when the browser finds a match.
`supportsHiddenUntilFound`	Checks whether the browser can search hidden content.
`animateIn`	Applies the starting state for a CSS entrance animation.
`animateOut`	Applies the exit state and calls your completion callback after animations finish.

Gesture Calculations

Import these helpers from @ui-sdk/core/gesture.

Helper	What It Does
`createVelocityTracker`	Measures velocity from recent pointer positions.
`projectDistance`	Estimates how far a moving value will travel as it slows down.
`solveSpring`	Calculates a spring's position and velocity over time.
`rubberBand`	Adds resistance as a value moves past an edge.
`sectorOf`	Converts a stroke's direction into a sector, such as a radial menu item.

Popups and Layers

Helper	What It Does
`createPopup`	Manages opening, closing, positioning, and focus using a popup preset.
`popupState`	Creates the initial open, mounted, and payload state.
`popupTrigger`	Builds a trigger slot that opens and closes the popup.
`popupContent`	Builds a content slot with presence, placement, and focus handling.
`popupClose`	Builds a slot that closes the popup.
`popupTitle`	Connects a visible title to the popup's accessible name.
`popupDescription`	Connects descriptive text to the popup.
`popupArrow`	Builds an arrow slot that follows the popup's placement.
`popupBackdrop`	Builds a backdrop slot behind a modal popup.
`popupViewport`	Builds a full-screen container slot for a popup sheet.
`popupSlots`	Builds the standard popup parts together.
`position`	Places an element beside an anchor and updates its placement.
`bindLayer`	Registers a floating element for Escape and outside-press dismissal.
`bindPersistentLayer`	Keeps an element usable across layers, including modal popups.
`isDismissal`	Identifies a dismissal reason, such as Escape or an outside press.
`supportsTopLayer`	Checks whether the browser supports the top layer used by popups.

Popup presets choose the interaction for a popover, dialog, tooltip, or hover card. Popup controllers open existing popup components from code and wait for a result. Import each from its component entrypoint, such as @ui-sdk/core/popover.

Preferences

Helper	What It Does
`createPreference`	Holds a choice from a list, notifies subscribers, and can save it between visits.
`createColorScheme`	Builds on a preference to choose light, dark, or the browser's scheme.
`colorSchemeOf`	Reads the color scheme a browser sends with a request.
`preferencesScript`	Puts saved preferences on their attributes before the first paint.
`createPointerKind`	Reports whether the main pointer is a finger or a mouse, and whether it can hover.
`pointerKindOf`	Guesses the pointer kind from a request's headers.

Storage

Helper	What It Does
`createLocalStorage`	Keeps a value in localStorage, for every tab, until it's removed.
`createSessionStorage`	Keeps a value in sessionStorage, for the tab, while it's open.
`createCookieStorage`	Keeps a value in a cookie, which the server reads too.

Canvas

Helper	What It Does
`createViewport`	Pans and zooms a canvas and converts between screen and canvas coordinates.
`createConnect`	Tracks connections between ports with the pointer or keyboard.
`connectMessage`	Provides the default announcements for connection steps.

Platform

Helper	What It Does
`announce`	Reads a message out to screen readers.
`prepareAnnouncements`	Adds the regions screen readers listen to before the first message.
`isRTL`	Checks whether an element's text runs right to left.
`matchesShortcut`	Checks whether a key press matches a shortcut, such as `mod+b`.
`formatShortcut`	Writes a shortcut the way the user's platform shows it.
`ariaKeyshortcuts`	Writes a shortcut as an `aria-keyshortcuts` value.

Mobile

Helper	What It Does
`bindViewport`	Follows the visible viewport and reports each change.
`bindAvoidKeyboard`	Lifts an element above the on-screen keyboard.

Changes and History

Helper	What It Does
`createChange`	Asks to change a state value, calling its callback first.
`createCommit`	Reports the final value when an interaction ends.
`dispatch`	Calls an action's callback, such as `onDelete`, and tells you if it was canceled.
`createUndoStack`	Keeps snapshots of a value you record, so you can undo and redo.
`createController`	Lets code outside a component call its methods.
`sourceOf`	Tells whether an event came from a mouse, touch, pen, keyboard, or code.
`isFocusFromKeyboard`	Checks whether focus just arrived from the keyboard.

Watching Changes

Import these helpers from @ui-sdk/core/observe.

Helper	What It Does
`observe`	Calls you with every change to the components on a page.
`elementOf`	Finds the element of the component a change came from.
`withSource`	Keeps a change's source across an `await`.

Building Blocks

Helper	What It Does
`definePrimitive`	Defines a component's options, state, and parts once for every framework.
`idPart`	Escapes an item value so it can be part of an id.
`elements`	Returns a component's bound parts in page order.
`openAttrs`	Returns the usual attributes for an open or closed part.
`checkedAttrs`	Returns the usual attributes for a checked, unchecked, or mixed part.
`css`	Turns style declarations into a `style` attribute and skips empty values.
`live`	Writes attributes for state that changes often, without rendering again.
`selects`	Tells each part which state changes it needs to hear about.
`direct`	Keeps chosen attributes current between renders.

Agents

Import these helpers from @ui-sdk/core/agent.

Helper	What It Does
`createAgent`	Lets an agent read the components on a page and use them.
`agentTools`	Describes the `snapshot`, `act`, and `query` tools for your model.
`registerTools`	Offers the same tools to an agent built into the browser.

History

Import these helpers from @ui-sdk/core/history.

Helper	What It Does
`createHistory`	Records every change to the page's components and who made it, so you can step back or undo one source.
`describeEntry`	Writes a short sentence for a history entry.
`stageChanges`	Tries a set of values on the real controls and lets you put the old ones back.

Values and Testing

Number, Date, Color, and Image cover formatting, parsing, and math for each kind of value. Each has its own entrypoint, such as @ui-sdk/core/number. Testing covers the checks for a component of your own.