Pine sweep

import { PineSweep } from "@arcadia/ui";

<PineSweep label="Running" />

The running indicator, drawn from the Arcadia mark: the light rests on one stroke at a time, left arm, pine, right arm, pine, four crossfading beats per half --loop-watch, so it ticks with a product's live horizon and the working-text shimmer. Resting strokes stay at a third, so the silhouette never disappears.

It is neutral (--pine-sweep-color, status-running), never the beacon. StatusDot status="running" renders it in chat rows, and a project row shows it at md while any of its chats runs. In a ListRow it takes the row's icon rank, so the active row above lights it.

Which loader? A Pine Sweep says an agent is running. A Shimmer marks the live status text beside it, a Spinner says a control or a small region is busy, and a Skeleton holds the place of content on its way.

rootStyle takes layout and these knobs. A container that tints its glyphs sets --pine-sweep-ink instead, which every sweep inside it takes: a ListRow's leading slot hands down its icon rank that way.

--pine-sweep-size

Ref<IconSize>Default var(--icon-xs)

Width; the height follows the mark (740 × 650).

--pine-sweep-color

PaintDefault var(--pine-sweep-ink, var(--status-running))

The ink. A container that tints its glyphs sets --pine-sweep-ink instead (a ListRow's leading slot does).

--pine-sweep-loop

Ref<Duration> | `calc(${Ref<Duration>} / ${number})`Default calc(var(--loop-watch) / 2)

One loop: four beats.

--pine-sweep-rest

numberDefault 0.34

A resting stroke's opacity.

Decorative unless given a label, which makes it an img named "Running". Omit the label when the row already says so. It never flashes: one stroke brightens at a time, slowly. With reduced motion the whole mark holds still at full strength.