# Utilities

> Utilities cover scroll coordination, visually hidden labels, autofocus targets, fixed surfaces, islands, and external overlays.

Web: https://velvet-ui.watermelons.workers.dev/docs/utilities

Utilities solve focus, portal, fixed-layer, responsive, theme-color, and scroll integration problems without adding them to every Sheet or motion import.

## Focused import

```tsx
import {
  AutoFocusTarget,
  ExternalOverlay,
  Fixed,
  Island,
  Scroll,
  VisuallyHidden,
} from "velvet-ui/utilities";
import "velvet-ui/sheet.css";
```

The utilities entry does not pull Toast or any styled composition. Import motion from `velvet-ui/motion` and SheetStack from `velvet-ui/sheet`; those capabilities have separate bundle ownership.

## Utility components

| Export | Use |
| --- | --- |
| `VisuallyHidden.Root` | Accessible text without visual layout |
| `AutoFocusTarget` | Explicit initial focus destination |
| `Fixed` | Viewport-fixed content that ignores sheet travel |
| `Island` | Interactive region belonging to the frontmost sheet |
| `ExternalOverlay.Root` | Third-party portal joined to sheet modality |
| `ThemeBackdrop` | Backdrop plus browser theme-color dimming |
| `SheetMorph.Content` | Shared-origin geometry |
| `SheetStack.Root/Outlet` | Nested layer coordination |

```tsx
<Sheet.Content>
  <VisuallyHidden.Root asChild>
    <Sheet.Title>Command palette</Sheet.Title>
  </VisuallyHidden.Root>
  <AutoFocusTarget asChild><input aria-label="Search" /></AutoFocusTarget>
</Sheet.Content>
```

## Portalled third-party UI

```tsx
<ExternalOverlay.Root asChild>
  <ThirdPartyDatePickerPortal />
</ExternalOverlay.Root>
```

Without this wrapper, a modal sheet can treat the third-party portal as outside content and make it inert.

## Hooks and helpers

| Export | Contract |
| --- | --- |
| `useClientMediaQuery(query)` | Client-safe boolean media match |
| `updateThemeColor(color)` | Updates the active theme-color meta value |
| `useThemeColorDimmingOverlay(options)` | Sets or animates theme dimming opacity |
| `createComponentId<T>()` | Creates an isolated composition context id |
| `SPRING_PRESETS` from `motion` | gentle, smooth, snappy, brisk, bouncy, elastic |
| `depthSheetVariables` from `depth-sheet` | token keys mapped to CSS variable names |
| `depthSheetDefaultTokens` from `depth-sheet` | values supplied by the composition CSS |
| `depthSheetStackingAnimation` from `depth-sheet` | bounded public Depth travel animation |