@sableui/react 0.13.2 → 0.15.0

package/AGENTS.md

@@ -42,7 +42,7 @@ These are short on purpose. Each links to a foundations doc with the full vocabu
 3. **Space on the 4px scale, by role.** Inset, stack, inline; related things closer than unrelated things. No off-scale `p-[15px]`. Padding, gaps and insets stay on the scale (a step, or `--spacing(n)` inside an arbitrary value) so the density control moves them; fixed `rem`/`px` only for what must not scale, like a hairline. Single-column content in a card is a flex column, not a grid. → `sable docs spacing`
 4. **Controls read the ladder.** Heights come from `--control-*`, so `<Density>` can retune a region at once. Never `h-[40px]`. → `sable docs spacing`
 5. **Shape and depth are roles.** Radii from the `rounded-*` ladder, concentric when nested (inner = outer − inset; `rounded-concentric-*`, `sable-frame-inner`); elevation by transience (resting → raised → overlay → modal → toast), one shadow per surface. → `sable docs shape` · `sable docs surfaces`
-6. **Motion has a reason and a recipe.** Apply a named `motion-*` recipe; drop to `duration-(--motion-duration-*)` + `ease-*` tokens only when none fits. Never Tailwind's `animate-*`, never a raw `duration-150`. Exits are faster than entrances and never overshoot. → `sable docs motion`
+6. **Motion has a reason and a recipe.** Apply a named `motion-*` recipe; drop to `duration-(--motion-duration-*)` + `ease-*` tokens only when none fits. Never Tailwind's `animate-*`, never a raw `duration-150`. Exits are faster than entrances and never overshoot. Components ship their craft (gliding indicators, rolling numbers, drawn ticks) on by default; to calm a dense view use `motion="subtle"` on the component or `<MotionScope level="subtle">` around a region, never a CSS override. → `sable docs motion`
 7. **Icons by semantic name.** `<Icon name="check" />`; size with `text-{size}`, never type utilities. A mark attached to a line of type (dot, bullet, leading icon) sits in an `h-[1lh] items-center` box and is sized in em, never nudged with px. → `sable docs typography`
 8. **Every scroll container declares a policy:** `scrollbar-quiet` (vertical) or `scrollbar-hidden` (horizontal, with an edge fade carrying the affordance).
 9. **Accessible by construction.** WCAG AA contrast (and a label on a brand or status fill also clears APCA Lc 60 — `label-contrast`), 44px hit areas, visible focus, logical properties, live regions that exist before they speak. → `sable docs accessibility`
@@ -65,7 +65,7 @@ The machine-readable version of this section is the `consume` block in `registry
 
    `styles.css` carries **Sable only** — the default theme, and the layout floor every other theme inherits (`--page-inset`, `--region-*`, `--rhythm-unit` on a bare `:root`). The bundled **alternates are opt-in**, because they are `[data-sable-theme]`-scoped and an app that never sets the attribute ships CSS that can never match: 5.5 KB gzip of permanently-dead weight, which is exactly how a real app's build audit found this. Using one? `@import "@sableui/react/theme/prism.css";`. Offering the whole set through a `<ThemeSelector>`? `@import "@sableui/react/themes.css";`. **Symptom of forgetting:** `data-sable-theme` is set, nothing matches, and the page silently renders as the Sable theme — no error, just the wrong theme.
 4. **Fonts:** load Figtree (sans) + DM Mono (mono) — the theme declares the stacks, the host provides the files. Apply `antialiased` (`-webkit-font-smoothing: antialiased` / `-moz-osx-font-smoothing: grayscale`) **once on the app root**: Sable's type scale was drawn against smoothed text, and without it macOS renders every weight heavier than designed. The package deliberately doesn't set it — a library has no business styling the host's whole page — so it has to happen here.
-5. **Providers:** `<IconProvider>` is **required** — wrap the app once in `<IconProvider set={reiconIconSet}>` with `import { reiconIconSet } from "@sableui/react/icons/reicon"` (without it every `<Icon>` renders nothing; development builds warn once). Pass another icon package's set instead to replace Reicon, or extend it using `composeIconSets(appExtras, reiconIconSet)` (list the added names in `.sable/icons.json` as `{ "names": [...] }` so `sable grade` accepts them); `<MotionProvider>` is optional too. Use `<SableThemeProvider>` + `useSableTheme()` when the app should expose user-selectable themes; pair `themeId` / `setThemeId` with `<ThemeSelector>` and `preference` / `setPreference` with `<ThemeSwitcher>`. The provider stores `light` / `dark` / `system`, toggles the `dark` class on `<html>`, stores the active design theme, and writes `data-sable-theme` for non-default themes. Apps with their own state layer can call `applySableColorMode()` / `applySableTheme()` instead. You only need a Tailwind `@custom-variant dark` if **your** app code uses `dark:` utilities (Sable ships none).
+5. **Providers:** `<IconProvider>` is **required** — wrap the app once in `<IconProvider set={reiconIconSet}>` with `import { reiconIconSet } from "@sableui/react/icons/reicon"` (without it every `<Icon>` renders nothing; development builds warn once). Pass another icon package's set instead to replace Reicon, or extend it using `composeIconSets(appExtras, reiconIconSet)` (list the added names in `.sable/icons.json` as `{ "names": [...] }` so `sable grade` accepts them); `<MotionProvider>` is optional too (`policy="subtle"` keeps feedback and drops flourishes app-wide). Use `<SableThemeProvider>` + `useSableTheme()` when the app should expose user-selectable themes; pair `themeId` / `setThemeId` with `<ThemeSelector>` and `preference` / `setPreference` with `<ThemeSwitcher>`. The provider stores `light` / `dark` / `system`, toggles the `dark` class on `<html>`, stores the active design theme, and writes `data-sable-theme` for non-default themes. Apps with their own state layer can call `applySableColorMode()` / `applySableTheme()` instead. You only need a Tailwind `@custom-variant dark` if **your** app code uses `dark:` utilities (Sable ships none).
 6. Import from the root barrel: `import { Button } from "@sableui/react"`. Page shells live on the `patterns` subpath (`import { SettingsPage } from "@sableui/react/patterns"`) — preview one, then copy its source from `registry.json → patterns` when the route needs to diverge. Blocks — section-sized compositions such as a sign-in card or a pricing card — live on the `blocks` subpath (`import { SignInBlock } from "@sableui/react/blocks"`) and ship the same way (`registry.json → blocks`); copy one and edit its content constants. A block's props are only `className`, `framed` and its primary action's callback, never content.
 
 7. **Check the wiring:** `npx sable doctor`. Every check it runs corresponds to a way Sable fails *silently* — a second React (blank page, "invalid hook call"), a missing `@source` (Tailwind emits none of the package's classes, everything renders unstyled), or `data-sable-theme` set with no theme CSS imported (every theme renders as the Sable theme and the switcher looks broken). Exits 1 on any failure; `--json` for the structured report.

package/CHANGELOG.md

@@ -1,5 +1,177 @@
 # What's new
 
+## 0.15.0
+
+Motion with some life in it: small things that turn on now land like events,
+told through the theme rather than one-off styles, and chat reactions that
+answer you the way a messaging app does.
+
+- **New: `LikeButton`.** A pressed-or-not toggle for a like, a star or a
+  save, with its count. Pressing it on fills the glyph, which blooms past
+  its size and settles while a ring opens and dots spray out in the theme's
+  palette families, and the count rolls up a digit; pressing it off is quiet.
+  It shows the viewer's like at once and goes back to `count` exactly
+  whenever `count` changes, so pass the server's total. `icon`, `tone` (a
+  palette family) and `label` make it a star or a save; `motion="subtle"`
+  keeps the fill and drops the flourish.
+- **New recipe: `motion-bloom`.** A small glyph landing in its on state grows
+  from nothing to 1.2 and settles. Remount the glyph (a changing `key`) to
+  replay it; `--motion-bloom-delay` lets a ring lead. Expressive.
+- **New: `<Burst>`.** The follow-through behind a bloom — a disc that hollows
+  into a ring, then dots thrown outward — coloured by palette families, so it
+  re-themes. Plays when its `trigger` changes, never on mount, and renders
+  nothing below full motion.
+- **Toast: a status glyph instead of an accent bar.** A typed toast now leads
+  with the same glyph and ink as Note and InlineStatus (success, info,
+  warning, and the destructive glyph for errors), and it blooms in once the
+  card has landed — and again in the spinner's place when a loading toast
+  settles. The coloured bar down the leading edge told the type by colour
+  alone. A stacked deck now springs as cards step back and fan out; leaving
+  toasts still take the standard curve.
+- **Feedback:** the chosen rating mark blooms as it is picked.
+- **Icons: `replay` and `motion`.** A single circular arrow for watching
+  something again from its start (`refresh` reads as fetching again), and
+  a play mark in a dashed ring for a motion or playback setting (`sparkles`
+  reads as AI).
+- **New: `ReactionPicker` and `MenuReactions`.** The quick row of emoji you
+  react to a message with. `ReactionPicker` is a toolbar for a popover or a
+  hover bar; `MenuReactions` is the same row as checkbox menu items, for the
+  top of the menu a message opens on right click or long press. The emoji
+  bloom in one after another as it opens and magnify under the pointer.
+- **Bubble reactions celebrate.** When a `BubbleReaction` becomes the
+  reader's own — pressed, or added already on to a row that has rendered —
+  the emoji blooms and copies of it spray out, and the count rolls. Taking
+  a reaction back is quiet, and the reactions a page loads with stay still.
+  New `label` names a pill ("Party, 3"); new `BubbleReactionAdd` is the
+  smiley pill that opens a picker. `BubbleReactions` now hides itself while
+  empty, so render it for every message: staying mounted is how the first
+  reaction still celebrates. A Bubble shows a focus ring when it is made
+  focusable as a menu trigger.
+- **New block: `MessageReactionsBlock`.** A thread you can react to from a
+  right-click / long-press menu or the add-reaction pill.
+- **`<Burst>`: `particle` and `playOnMount`.** Throw copies of a glyph
+  instead of dots (no ring, travelling upright), and play once on mount for
+  a glyph that exists because of the action.
+- **Icon: `emoji`.** A smiley, for an add-reaction control.
+- **Motion guidance:** amplitude scales with smallness (a glyph travels far, a
+  surface barely), a moment is staged (main object first, follow-through
+  after), and only a person's own choice is celebrated. In `sable docs
+  motion` and DESIGN.md.
+
+## 0.14.0
+
+Motion that is crafted by default and calm on request, and the first pieces for agent products.
+
+- **New: two motion levels, and `subtle`.** Motion is now *essential*
+  (colour and focus feedback, press, overlay arrival, disclosure, loaders,
+  chart hover) or *expressive* (glides, rolling numbers, drawn ticks,
+  shakes, staggers, chart arrival and morph, scroll reveals, spring
+  overshoot). Expressive durations also multiply by `--motion-expressive`,
+  which the new `subtle` policy sets to 0, and `subtle` takes the overshoot
+  out of `ease-spring` and `ease-bounce`. So `full` (the default) plays both,
+  `subtle` keeps every answer and drops every flourish, and `off` stills
+  everything. Set it app-wide with `<MotionProvider policy="subtle">`, for a
+  region with the new `<MotionScope level="subtle">`, or per component with a
+  new `motion` prop. Scopes and props can only turn motion **down**: `full`
+  on a component means "inherit", so nothing can override a reader's
+  reduce-motion setting. `useMotion()` gains `expressive`, and
+  `useMotionLevel(motion)` resolves a component's prop against everything
+  around it. `Reveal` and `TextReveal` are expressive: under `subtle` the
+  content is simply there.
+- **New recipes:** `motion-glide` (one indicator travelling to the selected
+  option), `motion-shake` (a refused answer, driven by the new `useShake()`),
+  `motion-tick` (a mark that draws itself in), `motion-appear` (a small
+  control mounting in place, through `@starting-style`), `motion-arrive`
+  (items a user action adds to a list, staggered) and `motion-size` (easing
+  between sizes, with the new `useAutoSize()` measuring a label change).
+  `sable utility <name>` has each one.
+- **New: `NumberTicker`.** A number that rolls to its new value, digit by
+  digit, keyed by place value, so 999 → 1,000 rolls the columns it keeps and
+  grows the one it gains. It formats through `Intl.NumberFormat`, reads as
+  plain text to assistive tech and copy, and lands without a roll under
+  `subtle`. `NotificationBadge` counts and the `PieChart` / `RadialChart`
+  centre values now roll through it.
+- **New: `ConfirmButton`.** An inline two-step for low-stakes destructive
+  actions. The first press arms it: the label changes, the button eases to
+  the new width, a thin line drains while it waits, and the armed state is
+  announced. A second press within `timeout` confirms; Escape, a click
+  elsewhere, blur or the timeout disarms it, and a double-click cannot
+  confirm. `DestructiveActionModal` stays the answer for high stakes.
+- **New: `TooltipGroup`.** Wrap a row of `SimpleTooltip`s and they share one
+  tooltip: moving along a toolbar, it glides to the next button and its label
+  slides across instead of closing and reopening.
+- **Selections travel.** `Tabs` renders a gliding indicator in both variants
+  (the underline and the pill), and a changed panel fades in. Single-select
+  `ToggleGroup appearance="segmented"` has one fill that glides and resizes
+  to the pressed option. `ThemeSwitcher` uses the same recipe, and
+  `Carousel`'s active dot eases its width. `SideNav` and `SidebarNav` draw
+  the current page as one fill that glides to the new item when the page
+  changes inside a persistent layout. Menu, Select and Combobox highlights
+  keep their glide, which is now expressive.
+- **Calendar pages with direction.** Going to the next or previous month
+  slides the old grid out toward the edge it leaves by and the new one in
+  from the other, over a short travel with a fade (react-day-picker's
+  `animate` mode on Sable keyframes, mirrored in RTL). It is on at full
+  motion only (a `DatePicker`'s calendar follows the app or scope policy);
+  `Calendar` takes `motion`, and an explicit `animate` still wins.
+- **Sidebar collapse eases.** Collapsing to the icon rail eases the width
+  instead of jumping 192px in one frame, so the content beside it visibly
+  takes the room. Icons stay on one column throughout and labels fade back
+  in on reopen. `Sidebar` takes `motion`; `subtle` snaps.
+- **Focus outlines ease in.** `motion-interactive` now also transitions
+  `outline-color`, `outline-width` and `outline-offset`, so a keyboard focus
+  ring drawn with `outline-*` grows from the element's edge over the fast
+  step instead of appearing in one frame. Instant under reduced motion.
+- **States finish their story.** `OtpField` shakes once when it turns
+  invalid, and its digits take the destructive colour. `CodeBlock`'s copy
+  button swaps to a check in place and announces "Copied". `Feedback` shows a
+  drawn check and a thank-you before it closes. A loading `Button` keeps its
+  width: the spinner lays over the label instead of replacing it. The
+  `ChatComposer` grows with an ease, and its send and stop swap in one
+  button. `SearchInput` and `CommandMenu`'s clear buttons appear rather than
+  pop. Expanding a `Tree` folder settles its rows in, staggered. The
+  `Checkbox` tick draws in from its leading stroke.
+- **Fixed: disclosure chevrons snapped.** Tailwind v4's `rotate-*` writes the
+  standalone `rotate` property, which `motion-interactive` did not list, so
+  the chevrons on `Accordion`, `Collapsible`, `Tree` and `ShowMore` jumped
+  180° in one frame while the panel beside them eased. The recipe now lists
+  `rotate`. `DataTable`'s sort chevron rotates instead of swapping glyphs.
+- **Chart hover dims mix toward the surface.** The bars, slices and rings
+  that are not under the pointer now step back by mixing toward the surface
+  colour instead of fading, so gridlines no longer strike through a dimmed
+  bar and a dimmed ring stays solid over its track.
+- **Deprecated: `animate` on charts.** Every chart takes `motion` instead.
+  `animate={false}` maps to `motion="subtle"` (no arrival or morph, hover
+  feedback kept); use `motion="off"` to still everything.
+- **Motion declaration is a build gate.** A component that reacts to the
+  pointer or carries state must declare its four motion slots (arrival,
+  response, transition, activity) in its meta, or decline each with a reason.
+  It used to be a report, and 36 components said nothing; all of them now
+  answer.
+- **Docs:** a new **Interactions** page shows the catalog by task (inspect,
+  select, confirm, recover, succeed, finish loading, type, point, notify).
+  Every preview has its own motion level and Replay. Playgrounds gain a Motion
+  row and **Copy for agent**, which copies the exact JSX, imports, install
+  commands, the active theme and `sable component <Name>`. The Motion page
+  sets the policy to Full, Subtle or Off and shows the two levels side by
+  side.
+
+- **New: `ToolCall`.** One tool an agent called, as a quiet row inside its
+  turn: a status glyph, what it did in plain words, the tool's name in mono,
+  and one word for where it is (`running`, `awaiting`, `complete`, `error`,
+  `denied`). Input and output sit behind a disclosure, as formatted JSON or
+  as a rendered result passed as `children`. A failure's message shows under
+  the row without opening anything. When a call settles, its spinner swaps
+  for the outcome in place (`motion-icon-swap`), and that's the only motion
+  in the row. The change is announced once, and a thread restored from
+  history announces nothing.
+- **New: `ApprovalBlock`**, in a new "AI & agents" block family. An agent
+  asking permission for one call: the question in plain words, what can't be
+  undone, the call's details, an "allow for the rest of this chat" Checkbox,
+  and Deny / Allow. Neither button is focused on arrival. After a decision,
+  one status line replaces the buttons, focus moves to it, and it's
+  announced. `onApprove({ remember })` and `onDeny()` report the answer.
+
 ## 0.13.2
 
 What to use instead, wherever a component is the wrong pick.

package/CONTRIBUTING.md

@@ -168,7 +168,9 @@ artwork, and nothing in the core graph imports `src/icon-sets/`.
 
 ## Motion
 
-Motion is a first-class layer — **subtle by default, tasteful spring welcome, zero runtime dependency** (CSS tokens/recipes + tiny browser-native JS). When a component has any interaction, wire it to the system; don't leave it static or hand-roll a transition.
+Motion is a first-class layer — **crafted by default, calm on request, zero runtime dependency** (CSS tokens/recipes + tiny browser-native JS). When a component has any interaction, wire it to the system; don't leave it static or hand-roll a transition. When its selection, value or mark changes in place, move the one element that represents it (`motion-glide`, `NumberTicker`, `motion-tick`, `motion-icon-swap`) rather than switching two things on and off.
+
+**Two levels.** Essential motion (feedback, press, overlay arrival, disclosure, loaders) runs on the plain tokens. Expressive motion (glides, rolling numbers, drawn ticks, shakes, staggers, arrival choreography, overshoot) multiplies its durations by `var(--motion-expressive, 1)` as well — the shipped expressive recipes already do — and JS-driven flourishes gate on `useMotionLevel(motion).expressive`. A component that owns a flourish takes `motion?: MotionLevel` (`full` | `subtle` | `off`) and spreads `data-motion={motionAttribute(motion)}` on its root; the prop only turns motion down.
 
 **Four slots.** Every component answers all four — by filling the slot, or by declining it in `meta.motion` with `recipe: "none"` and a reason:
 
@@ -179,13 +181,13 @@ Motion is a first-class layer — **subtle by default, tasteful spring welcome,
 | `transition` | how does it move between its own states? | `motion-disclosure`, or ease the transform |
 | `activity` | how do you tell "working" from "frozen"? | `motion-spin` · `motion-pulse` · `motion-shimmer` |
 
-This paragraph said "don't leave it static" for many releases while **nothing checked it**. The four motion rules below are all prohibitive — they fire on motion that is present and wrong, and none can fire on motion that is absent — so a component that snapped between every state passed the whole contract, and motion stayed a thing a human had to request by name. Two gates now close that: `static-interactive` (lint, fires on an element styled for pointer states with no recipe on it) and `meta.motion` + `pnpm build:registry -- --motion-report` (declaration and coverage).
+This paragraph said "don't leave it static" for many releases while **nothing checked it**. The four motion rules below are all prohibitive — they fire on motion that is present and wrong, and none can fire on motion that is absent — so a component that snapped between every state passed the whole contract, and motion stayed a thing a human had to request by name. Two gates now close that: `static-interactive` (lint, fires on an element styled for pointer states with no recipe on it) and `meta.motion` — `build-registry` **fails** when a component that reacts to the pointer or carries state declares no `motion` array (`pnpm build:registry -- --motion-report` prints the slot-by-slot coverage).
 
-1. **Reach for a recipe first** — apply one named class instead of a bespoke transition string: `motion-interactive` (default hover/focus/press chrome — **replaces** `transition-colors`), `motion-press` (tactile press; always pair with `motion-interactive`), `motion-fade`/`motion-pop`/`motion-slide-{up,down,left,right}` (overlay enter/exit, on Base UI `data-[starting-style]`/`data-[ending-style]`), `motion-disclosure` (height), and loaders `motion-{spin,shimmer,pulse,dot-bounce,ping}`.
+1. **Reach for a recipe first** — apply one named class instead of a bespoke transition string: `motion-interactive` (default hover/focus/press chrome — **replaces** `transition-colors`), `motion-press` (tactile press; always pair with `motion-interactive`), `motion-fade`/`motion-pop`/`motion-slide-{up,down,left,right}` (overlay enter/exit, on Base UI `data-[starting-style]`/`data-[ending-style]`), `motion-disclosure` (height), `motion-icon-swap` (a glyph that changes with state), the expressive `motion-{glide,shake,tick,appear,arrive,size}`, and loaders `motion-{spin,shimmer,pulse,dot-bounce,ping}`.
 2. **Drop to tokens only when a recipe doesn't fit.** Durations via `duration-(--motion-duration-{instant|fast|base|slow|slower})` — **never** a raw `duration-150` (it bypasses the kill-switch). Easings via `ease-{standard|decelerate|emphasized|spring|bounce}`. Spring/bounce overshoot is **enter-only**; exits stay clean.
 3. **Never** use Tailwind's built-in `animate-spin`/`animate-pulse`/`animate-ping`/`animate-bounce` — they ignore `--motion-scale`, so the on/off policy can't freeze them. Use the scale-aware `motion-*` loader recipes.
 4. **Compositor-first & subtle:** animate opacity + transform (scale/translate) only; short durations; no exit overshoot; no gaudy motion.
-5. **Policy:** all token-driven motion collapses to static under `prefers-reduced-motion` or `<MotionProvider>` off (one `--motion-scale: 0`). JS primitives read `useMotion().enabled` and must no-op when motion is off.
+5. **Policy:** all token-driven motion collapses to static under `prefers-reduced-motion` or `<MotionProvider>` off (one `--motion-scale: 0`); `subtle` zeroes `--motion-expressive` only. JS primitives read `useMotion().enabled` and must no-op when motion is off; JS flourishes read `expressive`.
 6. **JS motion lives in `src/motion/`** (zero-dep, browser-native: WAAPI / IntersectionObserver / View Transitions). Do **not** add the `motion` library to core — drag/gesture, FLIP layout, and velocity springs are the future optional `@sableui/motion` adapter (peer-dep `motion`).
 
 Full token table + rationale: `DESIGN.md → Motion`. Live demo: docs → Foundations → Motion (also the on/off toggle).

package/DESIGN.md

@@ -477,7 +477,13 @@ Reference via `z-(--z-overlay)`, never a raw `z-[9999]`. Base UI overlays portal
 
 ## Motion
 
-Motion is a first-class token layer, not an afterthought. **Subtle by default, with room for tasteful delight** — quick, deliberate, skippable, and never gaudy. The feel is restrained but alive, built compositor-first (opacity + transform only).
+Motion is a first-class token layer, not an afterthought. **Crafted by default, calm on request** — quick, deliberate, skippable, and never gaudy. Sable components ship the small continuity that makes an interface feel made rather than assembled: one indicator travels to the selected tab instead of two fills blinking, a total rolls to its new value, a check draws itself in, a wrong code shakes and clears. Built compositor-first (opacity + transform, with height and an absolutely positioned glider's size as the sanctioned exceptions).
+
+**The principle behind the craft: one thing travels; two things do not blink.** When a selection, a value or a mark changes in place, move the element that represents it. And finish the story — a refused answer shakes *and* says why, a success confirms where it happened, an armed action asks again before it acts.
+
+**Amplitude scales with smallness.** Motion felt lifeless when one amplitude served everything: the 4% a dialog needs is invisible on a 16px icon, so a heart turning on read as a colour swap. Small glyphs that a person turns on now travel far — grow from nothing past their size and settle — while surfaces keep their 0.96 → 1 and presses their 0.97. A moment is staged rather than flashed: the main object lands, then its follow-through (LikeButton's ring opens, the heart blooms 90ms later, dots are thrown after it). And only a person's own choice is celebrated, only at full motion: a burst on a system event or on load is a notification wearing confetti. The look of all of it still comes from the theme — palette families, tone glyphs, the radius scale — never from one-off values.
+
+**Two levels.** *Essential* motion answers the user — colour and focus feedback, press, overlay arrival, disclosure height, loaders, chart hover. *Expressive* motion narrates — glides, rolling numbers, drawn ticks, shakes, staggers, chart arrival and morph, scroll reveals, spring overshoot. Expressive durations are multiplied by a second factor, `--motion-expressive`, which `data-motion="subtle"` sets to 0 (and which takes the overshoot out of `ease-spring`). So the policy ladder is `full` (default: both) → `subtle` (essential only) → `off` (nothing moves; every state still changes). Set it app-wide on `<MotionProvider policy>`, for a region with `<MotionScope level>`, or per component with the `motion` prop that every component owning a flourish takes. Scopes and props can only turn motion **down** — `full` on a component means "inherit", so nothing below the provider can override a reader's reduce-motion setting.
 
 **Three parts:**
 
@@ -487,9 +493,10 @@ Motion is a first-class token layer, not an afterthought. **Subtle by default, w
    - Consume easings via the `ease-*` utilities; durations via `duration-(--motion-duration-*)` (so the kill-switch always applies).
 
 2. **Recipes** (`styles.css`) — named, reusable behaviours a component opts into with one class instead of a bespoke transition string:
-   - `motion-interactive` (hover/focus colour + transform transitions) · `motion-press` (tactile press settle) · `motion-fade` (scrims) · `motion-pop` (anchored/centred surfaces — gentle spring on open) · `motion-slide-{up,down,left,right}` (directional fade-slide) · `motion-disclosure` (height) · `motion-draw` (SVG line-art draw-on — a `pathLength="1"` path inside a `<Reveal>` draws in when scrolled into view; stagger siblings via `--motion-draw-delay`) · loaders `motion-spin`/`motion-pulse`/`motion-shimmer`/`motion-dot-bounce`. Enter/exit recipes drive off Base UI's `data-[starting-style]`/`data-[ending-style]`.
+   - `motion-interactive` (hover/focus colour + transform transitions, including `rotate`) · `motion-press` (tactile press settle) · `motion-fade` (scrims) · `motion-pop` (anchored/centred surfaces — gentle spring on open) · `motion-slide-{up,down,left,right}` (directional fade-slide) · `motion-disclosure` (height) · `motion-draw` (SVG line-art draw-on — a `pathLength="1"` path inside a `<Reveal>` draws in when scrolled into view; stagger siblings via `--motion-draw-delay`) · loaders `motion-spin`/`motion-pulse`/`motion-shimmer`/`motion-dot-bounce`. Enter/exit recipes drive off Base UI's `data-[starting-style]`/`data-[ending-style]`.
+   - Expressive: `motion-glide` (one indicator travelling to the selection) · `motion-shake` (a refused answer, driven by `useShake()`) · `motion-tick` (a mark that draws itself in) · `motion-appear` (a small control mounting via `@starting-style`) · `motion-arrive` (items a user action adds to a list, staggered) · `motion-size` (easing between intrinsic sizes via `interpolate-size`) · `motion-bloom` (a small glyph landing in its on state, 0 → 1.2 → 1). `NumberTicker` is the rolling-number primitive; `<Burst>` is the follow-through behind a bloom (a ring and thrown dots in the theme's palette families), used by `LikeButton`.
 
-3. **Policy** — `prefers-reduced-motion` and `<MotionProvider>` collapse `--motion-scale` to 0 in one place: transitions resolve instantly, loaders hold their first frame. Motion is fully **toggleable on/off** in-app via `useMotion()`.
+3. **Policy** — `prefers-reduced-motion` and `<MotionProvider>` collapse `--motion-scale` to 0 in one place: transitions resolve instantly, loaders hold their first frame. `subtle` zeroes `--motion-expressive` instead, so essential motion keeps playing. In-app, `useMotion()` reads and sets the policy; `useMotionLevel(motion)` resolves a component's own prop against everything around it, and JS-driven flourishes gate on its `expressive`.
 
 Richer physics (interruptible velocity-springs, FLIP layout, drag/gesture) is intentionally **out of core** — it's the future optional `@sableui/motion` adapter (peer-dep `motion`), reached for only when CSS genuinely can't express a surface.
 

package/dist/blocks/approval-block.js

@@ -0,0 +1,93 @@
+// src/blocks/approval-block.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/card/index.js";
+import { Checkbox } from "../components/checkbox/index.js";
+import { Code } from "../components/code/index.js";
+import { InlineStatus } from "../components/inline-status/index.js";
+import { Label } from "../components/label/index.js";
+import { cn } from "../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var request = {
+  tool: "send_email",
+  title: "Send the invoice to Ada?",
+  description: "The agent wants to email invoice INV-1042. An email can't be unsent.",
+  details: [
+    { label: "To", value: "ada@example.com" },
+    { label: "Subject", value: "INV-1042 for October" },
+    { label: "Attached", value: "INV-1042.pdf" }
+  ],
+  allowed: "Allowed. Sending the email.",
+  denied: "Denied. The agent won't send it."
+};
+function ApprovalBlock({ className, framed = true, onApprove, onDeny }) {
+  const [decision, setDecision] = useState(null);
+  const [remember, setRemember] = useState(false);
+  const id = useId();
+  const outcome = useRef(null);
+  useEffect(() => {
+    if (decision) outcome.current?.focus();
+  }, [decision]);
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-md", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: request.title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: request.description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-body-sm", children: [
+        request.details.map((d) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: d.label }),
+          /* @__PURE__ */ jsx("dd", { className: "truncate text-foreground", children: d.value })
+        ] }, d.label)),
+        /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Tool" }),
+          /* @__PURE__ */ jsx("dd", { className: "min-w-0", children: /* @__PURE__ */ jsx(Code, { children: request.tool }) })
+        ] })
+      ] }),
+      decision ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Checkbox, { id: `${id}-remember`, checked: remember, onCheckedChange: (v) => setRemember(v) }),
+        /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-remember`, className: "text-body-sm", children: [
+          "Allow ",
+          /* @__PURE__ */ jsx(Code, { children: request.tool }),
+          " for the rest of this chat"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardFooter, { actions: true, className: "justify-end", children: decision ? /* @__PURE__ */ jsx(
+      InlineStatus,
+      {
+        ref: outcome,
+        tabIndex: -1,
+        role: "status",
+        tone: decision === "allowed" ? "success" : "neutral",
+        className: "me-auto outline-none",
+        children: decision === "allowed" ? request.allowed : request.denied
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => {
+            setDecision("denied");
+            onDeny?.();
+          },
+          children: "Deny"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            setDecision("allowed");
+            onApprove?.({ remember });
+          },
+          children: "Allow"
+        }
+      )
+    ] }) })
+  ] });
+}
+export {
+  ApprovalBlock
+};

package/dist/blocks/approval-block.meta.js

@@ -0,0 +1,23 @@
+// src/blocks/approval-block.meta.ts
+var approvalBlockMeta = {
+  name: "ApprovalBlock",
+  family: "AI & agents",
+  kind: "card",
+  width: { min: "18rem", max: "28rem" },
+  summary: `An agent asking permission for one tool call: the question, what will happen and what can't be undone, the call's details, an "allow for the rest of this chat" Checkbox, and Deny / Allow.`,
+  intent: 'Reach for this in a chat or agent run when a tool call waits on the person \u2014 sending, paying, deleting, publishing. The call itself, before and after the decision, is a ToolCall with status="awaiting", then "complete" or "denied". A destructive action outside an agent is DestructiveActionModal.',
+  notes: [
+    `The title is the question in plain words ("Send the invoice to Ada?"), not the tool's name; the tool's name is one row of the details, for the person who wants to know exactly what runs.`,
+    "The description says what can't be undone. That sentence is what the person is deciding on.",
+    "Deny comes first and Allow is the primary on the end, the same order as every Sable confirmation. Neither is focused on arrival: an approval that a stray Enter can grant is not an approval.",
+    "After a decision the buttons give way to one InlineStatus line saying what happened, so the thread keeps a record of the answer."
+  ],
+  a11y: [
+    "Focus moves to the outcome line when the buttons leave, instead of dropping to the page; the line is a role=status region, so the decision is announced.",
+    "The details are a dl, so each value is read with its label.",
+    "The remember Checkbox has its own Label, so the tool name inside it is part of its accessible name."
+  ]
+};
+export {
+  approvalBlockMeta
+};

package/dist/blocks/index.d.ts

@@ -13,6 +13,21 @@ declare function ApiKeysBlock({ className, framed, onCreate, onKeyAction }: ApiK
 
 declare const apiKeysBlockMeta: BlockMeta;
 
+interface ApprovalBlockProps {
+    className?: string;
+    /** false drops the card's surface and border — for a chat column that already frames it. */
+    framed?: boolean;
+    /** The person allowed the call. `remember` is the "for the rest of this chat" choice. */
+    onApprove?: (options: {
+        remember: boolean;
+    }) => void;
+    /** The person declined the call. */
+    onDeny?: () => void;
+}
+declare function ApprovalBlock({ className, framed, onApprove, onDeny }: ApprovalBlockProps): react.JSX.Element;
+
+declare const approvalBlockMeta: BlockMeta;
+
 interface ChatThreadBlockProps {
     className?: string;
     /** false drops the card's surface and border. Keep it framed on a muted page: incoming bubbles are the muted surface too. */
@@ -155,6 +170,17 @@ declare function MediaPlayerBlock({ className, framed, onPlayingChange, onPrevio
 
 declare const mediaPlayerBlockMeta: BlockMeta;
 
+interface MessageReactionsBlockProps {
+    className?: string;
+    /** false drops the card's surface and border. Keep it framed on a muted page: incoming bubbles are the muted surface too. */
+    framed?: boolean;
+    /** Called when the reader adds or removes a reaction, with the message, the emoji and whether it is now on. */
+    onReact?: (messageId: string, emoji: string, on: boolean) => void;
+}
+declare function MessageReactionsBlock({ className, framed, onReact }: MessageReactionsBlockProps): react.JSX.Element;
+
+declare const messageReactionsBlockMeta: BlockMeta;
+
 interface NewsletterBlockProps {
     className?: string;
     /** false drops the card's surface and border — for a footer or muted section that already frames it. */
@@ -393,4 +419,4 @@ declare function WalletBlock({ className, framed, onSend, onReceive }: WalletBlo
 
 declare const walletBlockMeta: BlockMeta;
 
-export { ApiKeysBlock, ChatThreadBlock, CommandPaletteBlock, CtaBandBlock, DangerZoneBlock, DeviceComparisonBlock, EventCardBlock, FaqBlock, FeatureGridBlock, FeedbackFormBlock, GoalProgressBlock, HeroBlock, InviteTeamBlock, InvoiceHistoryBlock, KpiSparklineBlock, MediaPlayerBlock, NewsletterBlock, NotFoundBlock, NotificationListBlock, NotificationSettingsBlock, OrderTrackingBlock, PricingCardBlock, PricingTableBlock, ProductCardBlock, ProfileCardBlock, ProfileFormBlock, RevenueBreakdownBlock, SignInBlock, SignUpBlock, SiteFooterBlock, StatRowBlock, StepsBlock, TaskListBlock, TeamMembersBlock, TestimonialBlock, TrafficSourcesBlock, TrafficTrendBlock, UploadListBlock, VerifyCodeBlock, WalletBlock, apiKeysBlockMeta, chatThreadBlockMeta, commandPaletteBlockMeta, ctaBandBlockMeta, dangerZoneBlockMeta, deviceComparisonBlockMeta, eventCardBlockMeta, faqBlockMeta, featureGridBlockMeta, feedbackFormBlockMeta, goalProgressBlockMeta, heroBlockMeta, inviteTeamBlockMeta, invoiceHistoryBlockMeta, kpiSparklineBlockMeta, mediaPlayerBlockMeta, newsletterBlockMeta, notFoundBlockMeta, notificationListBlockMeta, notificationSettingsBlockMeta, orderTrackingBlockMeta, pricingCardBlockMeta, pricingTableBlockMeta, productCardBlockMeta, profileCardBlockMeta, profileFormBlockMeta, revenueBreakdownBlockMeta, signInBlockMeta, signUpBlockMeta, siteFooterBlockMeta, statRowBlockMeta, stepsBlockMeta, taskListBlockMeta, teamMembersBlockMeta, testimonialBlockMeta, trafficSourcesBlockMeta, trafficTrendBlockMeta, uploadListBlockMeta, verifyCodeBlockMeta, walletBlockMeta };
+export { ApiKeysBlock, ApprovalBlock, ChatThreadBlock, CommandPaletteBlock, CtaBandBlock, DangerZoneBlock, DeviceComparisonBlock, EventCardBlock, FaqBlock, FeatureGridBlock, FeedbackFormBlock, GoalProgressBlock, HeroBlock, InviteTeamBlock, InvoiceHistoryBlock, KpiSparklineBlock, MediaPlayerBlock, MessageReactionsBlock, NewsletterBlock, NotFoundBlock, NotificationListBlock, NotificationSettingsBlock, OrderTrackingBlock, PricingCardBlock, PricingTableBlock, ProductCardBlock, ProfileCardBlock, ProfileFormBlock, RevenueBreakdownBlock, SignInBlock, SignUpBlock, SiteFooterBlock, StatRowBlock, StepsBlock, TaskListBlock, TeamMembersBlock, TestimonialBlock, TrafficSourcesBlock, TrafficTrendBlock, UploadListBlock, VerifyCodeBlock, WalletBlock, apiKeysBlockMeta, approvalBlockMeta, chatThreadBlockMeta, commandPaletteBlockMeta, ctaBandBlockMeta, dangerZoneBlockMeta, deviceComparisonBlockMeta, eventCardBlockMeta, faqBlockMeta, featureGridBlockMeta, feedbackFormBlockMeta, goalProgressBlockMeta, heroBlockMeta, inviteTeamBlockMeta, invoiceHistoryBlockMeta, kpiSparklineBlockMeta, mediaPlayerBlockMeta, messageReactionsBlockMeta, newsletterBlockMeta, notFoundBlockMeta, notificationListBlockMeta, notificationSettingsBlockMeta, orderTrackingBlockMeta, pricingCardBlockMeta, pricingTableBlockMeta, productCardBlockMeta, profileCardBlockMeta, profileFormBlockMeta, revenueBreakdownBlockMeta, signInBlockMeta, signUpBlockMeta, siteFooterBlockMeta, statRowBlockMeta, stepsBlockMeta, taskListBlockMeta, teamMembersBlockMeta, testimonialBlockMeta, trafficSourcesBlockMeta, trafficTrendBlockMeta, uploadListBlockMeta, verifyCodeBlockMeta, walletBlockMeta };

package/dist/blocks/index.js

@@ -1,6 +1,8 @@
 // src/blocks/index.ts
 import { ApiKeysBlock } from "./api-keys-block.js";
 import { apiKeysBlockMeta } from "./api-keys-block.meta.js";
+import { ApprovalBlock } from "./approval-block.js";
+import { approvalBlockMeta } from "./approval-block.meta.js";
 import { ChatThreadBlock } from "./chat-thread-block.js";
 import { chatThreadBlockMeta } from "./chat-thread-block.meta.js";
 import { CommandPaletteBlock } from "./command-palette-block.js";
@@ -31,6 +33,8 @@ import { KpiSparklineBlock } from "./kpi-sparkline-block.js";
 import { kpiSparklineBlockMeta } from "./kpi-sparkline-block.meta.js";
 import { MediaPlayerBlock } from "./media-player-block.js";
 import { mediaPlayerBlockMeta } from "./media-player-block.meta.js";
+import { MessageReactionsBlock } from "./message-reactions-block.js";
+import { messageReactionsBlockMeta } from "./message-reactions-block.meta.js";
 import { NewsletterBlock } from "./newsletter-block.js";
 import { newsletterBlockMeta } from "./newsletter-block.meta.js";
 import { NotFoundBlock } from "./not-found-block.js";
@@ -81,6 +85,7 @@ import { WalletBlock } from "./wallet-block.js";
 import { walletBlockMeta } from "./wallet-block.meta.js";
 export {
   ApiKeysBlock,
+  ApprovalBlock,
   ChatThreadBlock,
   CommandPaletteBlock,
   CtaBandBlock,
@@ -96,6 +101,7 @@ export {
   InvoiceHistoryBlock,
   KpiSparklineBlock,
   MediaPlayerBlock,
+  MessageReactionsBlock,
   NewsletterBlock,
   NotFoundBlock,
   NotificationListBlock,
@@ -121,6 +127,7 @@ export {
   VerifyCodeBlock,
   WalletBlock,
   apiKeysBlockMeta,
+  approvalBlockMeta,
   chatThreadBlockMeta,
   commandPaletteBlockMeta,
   ctaBandBlockMeta,
@@ -136,6 +143,7 @@ export {
   invoiceHistoryBlockMeta,
   kpiSparklineBlockMeta,
   mediaPlayerBlockMeta,
+  messageReactionsBlockMeta,
   newsletterBlockMeta,
   notFoundBlockMeta,
   notificationListBlockMeta,

package/dist/blocks/message-reactions-block.js

@@ -0,0 +1,87 @@
+"use client";
+
+// src/blocks/message-reactions-block.tsx
+import { useState } from "react";
+import { Bubble, BubbleReaction, BubbleReactionAdd, BubbleReactions } from "../components/bubble/index.js";
+import { Card, CardContent, CardFooter } from "../components/card/index.js";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger
+} from "../components/context-menu/index.js";
+import { Message } from "../components/message/index.js";
+import { DEFAULT_REACTIONS, MenuReactions } from "../components/reaction-picker/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var messages = [
+  { id: "m1", text: "The new onboarding flow is live on staging \u{1F680}", mine: false, reactions: { "\u{1F389}": 2, "\u{1F440}": 1 } },
+  { id: "m2", text: "Clicked through it twice. The progress bar is so smooth.", mine: true, reactions: {} },
+  { id: "m3", text: "Ship it Friday?", mine: false, reactions: { "\u{1F44D}": 1 } }
+];
+var hint = "Right-click or long-press a message to react.";
+var labels = {
+  ...Object.fromEntries(DEFAULT_REACTIONS.map((r) => [r.emoji, r.label])),
+  "\u{1F440}": "Eyes"
+};
+function MessageReactionsBlock({ className, framed = true, onReact }) {
+  const [mine, setMine] = useState({ m1: ["\u{1F389}"] });
+  const toggle = (messageId, emoji) => {
+    const on = !(mine[messageId] ?? []).includes(emoji);
+    setMine((prev) => {
+      const current = prev[messageId] ?? [];
+      const next = current.includes(emoji) ? current.filter((e) => e !== emoji) : [...current, emoji];
+      return { ...prev, [messageId]: next };
+    });
+    onReact?.(messageId, emoji, on);
+  };
+  return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-sm", className), children: [
+    /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col gap-3", children: messages.map((m) => {
+      const align = m.mine ? "end" : "start";
+      const chosen = mine[m.id] ?? [];
+      const counts = { ...m.reactions };
+      for (const emoji of chosen) counts[emoji] = counts[emoji] ?? 0;
+      const pills = Object.entries(counts).map(([emoji, others]) => ({
+        emoji,
+        active: chosen.includes(emoji),
+        count: others + (chosen.includes(emoji) ? 1 : 0)
+      }));
+      return /* @__PURE__ */ jsxs(Message, { messageId: m.id, align: m.mine ? "end" : void 0, children: [
+        /* @__PURE__ */ jsxs(ContextMenu, { children: [
+          /* @__PURE__ */ jsx(
+            ContextMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx(Bubble, { tabIndex: 0, variant: m.mine ? "primary" : void 0, align }),
+              children: m.text
+            }
+          ),
+          /* @__PURE__ */ jsxs(ContextMenuContent, { children: [
+            /* @__PURE__ */ jsx(MenuReactions, { selected: chosen, onSelect: (emoji) => toggle(m.id, emoji) }),
+            /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
+            /* @__PURE__ */ jsx(ContextMenuItem, { children: "Reply" }),
+            /* @__PURE__ */ jsx(ContextMenuItem, { children: "Copy text" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(BubbleReactions, { align, children: [
+          pills.map((p) => /* @__PURE__ */ jsx(
+            BubbleReaction,
+            {
+              emoji: p.emoji,
+              label: labels[p.emoji],
+              count: p.count,
+              active: p.active,
+              onClick: () => toggle(m.id, p.emoji)
+            },
+            p.emoji
+          )),
+          pills.length > 0 ? /* @__PURE__ */ jsx(BubbleReactionAdd, { selected: chosen, onSelect: (emoji) => toggle(m.id, emoji) }) : null
+        ] })
+      ] }, m.id);
+    }) }),
+    /* @__PURE__ */ jsx(CardFooter, { className: "text-caption text-muted-foreground", children: hint })
+  ] });
+}
+export {
+  MessageReactionsBlock
+};

package/dist/blocks/message-reactions-block.meta.js

@@ -0,0 +1,23 @@
+// src/blocks/message-reactions-block.meta.ts
+var messageReactionsBlockMeta = {
+  name: "MessageReactionsBlock",
+  family: "Social & messaging",
+  kind: "card",
+  width: { min: "18rem", max: "24rem" },
+  summary: "A short thread you can react to: right-click or long-press a bubble for a menu with a row of quick reactions above Reply and Copy, or use the add-reaction pill under a message. A new reaction blooms in and sprays copies of its emoji.",
+  intent: "Reach for this when a conversation excerpt should be reactable \u2014 a team thread, a comment card, a support transcript. A read-only excerpt is ChatThreadBlock; a working chat with a composer and history is the ChatPanel page shell.",
+  notes: [
+    "Two ways in, on purpose: the right-click / long-press menu is fast once you know it is there, and the add-reaction pill is how a first-time reader finds reactions at all.",
+    "The quick row in the menu is MenuReactions (checkbox menu items) and the one in the pill's popover is ReactionPicker (a toolbar), so each is reachable by the keyboard model of the surface it sits in.",
+    "Only the reader's own reaction celebrates. Counts from other people roll quietly, and the reactions a page loads with never play.",
+    "The add-reaction pill appears only on messages that already have reactions; a message with none is reacted to from its menu, which keeps quiet rows quiet."
+  ],
+  a11y: [
+    "Each bubble is focusable, and its menu opens on right click, long press, Shift+F10 or the Menu key; its reactions are checkbox items reporting whether the reader has used each one.",
+    'Each reaction pill is a toggle named by its meaning and count ("Party, 3") with `aria-pressed`; the emoji and the burst are hidden from assistive tech.',
+    "Under reduced motion the reaction appears and the count changes at once; nothing else is lost."
+  ]
+};
+export {
+  messageReactionsBlockMeta
+};