Components/Feedback/Marker
COMPONENT55.55

Marker

Conversation rows for status updates and system notes — bordered rows plus centered labeled separators. Live work via role="status" with spinner and shimmer.

INSTALL

1pnpm dlx @sayagodev/mo add marker

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/marker.css";

EXAMPLES

Default
Switched to a new branch
Thinking…
Conversation compacted
Explored 4 files
Variants
A default marker for inline notes.
A separator marker
A border marker for row boundaries.
Status
Compacting conversation
Running tests
Shimmer
Thinking…
Reading 4 files…
Separator
Today
Worked for 42s
Conversation compacted
Border
Switched to release-candidate
Reviewed 8 related files
Opened implementation notes
With icon
Switched to a new branch
Explored 4 files
Syncing completed
Links & buttons
View the pull request
Read the release notes for details.

USAGE

1<div data-marker>2  <span data-marker-icon aria-hidden="true"><svg …/></span>3  <span data-marker-content>Switched to a new branch</span>4</div>5 6<div data-marker="separator"><span data-marker-content>Today</span></div>7<div data-marker="border">8  <span data-marker-content>A bordered status row</span>9</div>10 11<!-- live status -->12<div data-marker role="status">13  <span data-marker-icon aria-hidden="true"><span aria-busy="true" data-spinner="small"></span></span>14  <span data-marker-content class="shimmer">Thinking…</span>15</div>16 17<!-- link or button root -->18<a href="#" data-marker>…</a>

API

NAMEKINDDESCRIPTION
[data-marker]elementRoot row: flex, text-sm muted; works on div, a or button
data-marker="border"attributeBottom hairline + pb-2 to separate the next row
data-marker="separator"attributeCentered label with divider lines on both sides
[data-marker-icon]elementDecorative 1rem icon slot; author sets aria-hidden
[data-marker-content]elementText slot; centered and flex-none inside separator
role="status"attributeLive-region announcement for streaming/in-progress markers
.shimmerclassAnimated streaming-text gradient on content; static under reduced motion
aria-busy + data-spinner="small"attributeSpinner in the icon slot for in-progress markers

FILES

src/css/marker.css
Install:mo add marker

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Tokens & hooks — edit live
Global tokens
--border--foreground--muted-foreground

Preview

Switched to a new branch
Thinking…
Conversation compacted

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.