@sableui/react 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # 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.

package/DESIGN.md

@@ -481,6 +481,8 @@ Motion is a first-class token layer, not an afterthought. **Crafted by default,
 
 **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:**
@@ -492,7 +494,7 @@ Motion is a first-class token layer, not an afterthought. **Crafted by default,
 
 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, 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`). `NumberTicker` is the rolling-number primitive.
+   - 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. `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`.
 

package/dist/blocks/index.d.ts

@@ -170,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. */
@@ -408,4 +419,4 @@ declare function WalletBlock({ className, framed, onSend, onReceive }: WalletBlo
 
 declare const walletBlockMeta: BlockMeta;
 
-export { ApiKeysBlock, ApprovalBlock, 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, approvalBlockMeta, 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

@@ -33,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";
@@ -99,6 +101,7 @@ export {
   InvoiceHistoryBlock,
   KpiSparklineBlock,
   MediaPlayerBlock,
+  MessageReactionsBlock,
   NewsletterBlock,
   NotFoundBlock,
   NotificationListBlock,
@@ -140,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
+};

package/dist/components/bubble/bubble.js

@@ -1,7 +1,22 @@
+"use client";
+
 // src/components/bubble/bubble.tsx
+import {
+  Children,
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { useTypeTier } from "../../lib/density.js";
+import { Burst } from "../../motion/Burst.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { NumberTicker } from "../number-ticker/number-ticker.js";
 import { Pill } from "../pill/pill.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { DEFAULT_REACTIONS, ReactionPicker } from "../reaction-picker/reaction-picker.js";
 import {
   bubbleTailVariants,
   bubbleReactionsVariants,
@@ -60,28 +75,46 @@ function BubbleTail({ variant, align }) {
   );
 }
 Bubble.displayName = "Bubble";
+var ReactionRowLive = createContext(false);
 function BubbleReactions({
   align = "start",
   className,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  const [live, setLive] = useState(false);
+  useEffect(() => setLive(true), []);
+  return /* @__PURE__ */ jsx(ReactionRowLive.Provider, { value: live, children: /* @__PURE__ */ jsx(
     "div",
     {
+      hidden: Children.toArray(children).length === 0 || void 0,
       className: cn(bubbleReactionsVariants({ align }), className),
-      ...props
+      ...props,
+      children
     }
-  );
+  ) });
 }
 BubbleReactions.displayName = "BubbleReactions";
 function BubbleReaction({
   emoji,
+  label,
   count,
   active = false,
+  motion,
   className,
   ...props
 }) {
   const tier = useTypeTier();
+  const live = useContext(ReactionRowLive);
+  const [arrived] = useState(() => live && active);
+  const [shots, setShots] = useState(arrived ? 1 : 0);
+  const [wasActive, setWasActive] = useState(active);
+  if (active !== wasActive) {
+    setWasActive(active);
+    if (active) setShots((n) => n + 1);
+  }
+  const shown = count !== void 0 && count > 1 ? count : void 0;
+  const named = label === void 0 ? void 0 : shown === void 0 ? label : `${label}, ${shown}`;
   return (
     // Pill's own quiet chip: outline (a hairline at rest, a primary tint when
     // it is the reader's) at the xs control height. No overrides — a reaction
@@ -92,19 +125,86 @@ function BubbleReaction({
         appearance: "outline",
         size: "sm",
         selected: active,
+        "aria-label": named,
+        "data-motion": motionAttribute(motion),
         className: cn(tier.secondary, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: emoji }),
-          count !== void 0 && count > 1 ? /* @__PURE__ */ jsx("span", { className: "text-mono-caption tabular-nums", children: count }) : null
+          /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: { "--motion-bloom-delay": "60ms" },
+                className: cn("inline-flex text-body-lg leading-none", active && shots > 0 && "motion-bloom"),
+                children: emoji
+              },
+              shots
+            ),
+            /* @__PURE__ */ jsx(
+              Burst,
+              {
+                trigger: shots,
+                playOnMount: arrived,
+                particle: emoji,
+                count: 5,
+                motion,
+                className: "[--burst-size:4em]"
+              }
+            )
+          ] }),
+          shown === void 0 ? null : /* @__PURE__ */ jsx(NumberTicker, { value: shown, motion, className: "text-mono-caption tabular-nums" })
         ]
       }
     )
   );
 }
 BubbleReaction.displayName = "BubbleReaction";
+function BubbleReactionAdd({
+  reactions = DEFAULT_REACTIONS,
+  selected,
+  onSelect,
+  label = "Add reaction",
+  motion,
+  className,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          Pill,
+          {
+            appearance: "outline",
+            size: "sm",
+            "aria-label": label,
+            className: cn("text-muted-foreground", className),
+            ...props
+          }
+        ),
+        children: /* @__PURE__ */ jsx(Icon, { name: "emoji", className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { side: "top", align: "start", sideOffset: 6, className: "w-auto rounded-full p-1", children: /* @__PURE__ */ jsx(
+      ReactionPicker,
+      {
+        reactions,
+        selected,
+        motion,
+        onSelect: (emoji) => {
+          setOpen(false);
+          onSelect?.(emoji);
+        }
+      }
+    ) })
+  ] });
+}
+BubbleReactionAdd.displayName = "BubbleReactionAdd";
 export {
   Bubble,
   BubbleReaction,
+  BubbleReactionAdd,
   BubbleReactions
 };

package/dist/components/bubble/bubble.meta.js

@@ -66,12 +66,17 @@ var bubbleMeta = {
       {
         name: "BubbleReaction",
         required: false,
-        description: "One reaction pill \u2014 emoji, count (hidden at 1), and pressed state."
+        description: "One reaction pill \u2014 emoji, count (hidden at 1), and pressed state. Celebrates when it becomes the reader's own."
+      },
+      {
+        name: "BubbleReactionAdd",
+        required: false,
+        description: "The add-reaction pill at the end of the row: opens a ReactionPicker above it."
       }
     ]
   },
   related: {
-    components: ["Message", "MessageScroller", "Marker", "Attachment"]
+    components: ["Message", "MessageScroller", "Marker", "Attachment", "ReactionPicker"]
   },
   props: [
     {
@@ -106,8 +111,13 @@ var bubbleMeta = {
     },
     {
       name: "BubbleReaction",
-      type: '{ emoji: ReactNode; count?: number; active?: boolean } & ComponentPropsWithRef<"button">',
-      description: 'One reaction pill. A toggle, not a label: `active` drives `aria-pressed` as well as the styling, and `count` is hidden at 1 because the pill already says "one".'
+      type: '{ emoji: ReactNode; label?: string; count?: number; active?: boolean; motion?: MotionLevel } & ComponentPropsWithRef<"button">',
+      description: 'One reaction pill. A toggle, not a label: `active` drives `aria-pressed` as well as the styling, `label` names it ("Party, 3"), and `count` is hidden at 1 because the pill already says "one". When it turns on \u2014 pressed, or newly added already on \u2014 the emoji blooms, copies of it burst out and the count rolls; pills the page loads with stay still.'
+    },
+    {
+      name: "BubbleReactionAdd",
+      type: '{ reactions?: Reaction[]; selected?: string[]; onSelect?: (emoji: string) => void; label?: string; motion?: MotionLevel } & ComponentPropsWithRef<"button">',
+      description: "The add-reaction pill: a smiley that opens a ReactionPicker above it. Choosing an emoji closes the picker and calls `onSelect`; add the emoji to the row and its new pill celebrates on arrival."
     }
   ],
   variants: {
@@ -128,9 +138,35 @@ var bubbleMeta = {
     "muted-foreground",
     "ring"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Bubble",
+      why: "A bubble arrives with its Message row, which owns how a new message enters the transcript. A reaction pill that the reader just added arrives with its own celebration (below)."
+    },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "BubbleReaction",
+      why: "Reacting is the reader's choice, so it is answered like a like: the emoji grows from nothing past its size and settles, while copies of it spray outward and fade (Burst with the emoji as its particle, the way chat apps answer a reaction). Plays when a pill turns on and when a pill mounts already on into a row that has rendered \u2014 never for the pills a page loads with. Pills inherit Pill's motion-interactive and motion-press."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "BubbleReaction",
+      why: "The count rolls with NumberTicker as people react. Turning a reaction off is quiet: the tint eases out and the count rolls back, with no burst. Under `subtle` or reduced motion the bloom and the spray are dropped and the tint and count alone answer."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Bubble",
+      why: "A bubble is static content; a message still being written is StreamingText or a Marker, not a state of the surface."
+    }
+  ],
   a11y: [
     "The surface is a plain container with no imposed role \u2014 a bubble is presentation, and announcing one as a region would put a landmark around every line of a conversation.",
-    "Reaction pills are real buttons reporting `aria-pressed`, so the reader's own reaction is state rather than colour alone; the emoji is hidden from AT and the count is left readable.",
+    'Reaction pills are real buttons reporting `aria-pressed`, so the reader\'s own reaction is state rather than colour alone. Give each a `label`: it is named "Party, 3", with the emoji and its burst hidden from AT. The add-reaction pill is named "Add reaction" and opens a toolbar picker.',
     "`whitespace-pre-wrap` and `break-words` keep pasted logs, long URLs, and hard-wrapped text inside the surface instead of overflowing the conversation.",
     "Every variant meets AA against its own surface, including `primary`, which pairs the primary fill with its paired foreground token rather than a hardcoded white."
   ],
@@ -145,7 +181,7 @@ var bubbleMeta = {
     },
     {
       label: "With reactions",
-      code: '<Message messageId="m3">\n	<Bubble>Shipped 0.45.0.</Bubble>\n	<BubbleReactions>\n		<BubbleReaction emoji="\u{1F389}" count={3} active onClick={() => toggle("\u{1F389}")} />\n		<BubbleReaction emoji="\u{1F440}" count={1} onClick={() => toggle("\u{1F440}")} />\n	</BubbleReactions>\n</Message>'
+      code: '<Message messageId="m3">\n	<Bubble>Shipped 0.45.0.</Bubble>\n	<BubbleReactions>\n		<BubbleReaction emoji="\u{1F389}" label="Party" count={3} active onClick={() => toggle("\u{1F389}")} />\n		<BubbleReaction emoji="\u{1F440}" label="Eyes" count={1} onClick={() => toggle("\u{1F440}")} />\n		<BubbleReactionAdd selected={mine} onSelect={toggle} />\n	</BubbleReactions>\n</Message>'
     },
     {
       label: "A grouped run drops the repeated tail",

package/dist/components/bubble/bubble.variants.js

@@ -28,7 +28,7 @@ var bubbleTailVariants = cva(
   }
 );
 var bubbleVariants = cva(
-  "relative w-fit max-w-[42rem] whitespace-pre-wrap break-words rounded-lg px-3.5 py-2.5 text-body-md",
+  "relative w-fit max-w-[42rem] whitespace-pre-wrap break-words rounded-lg px-3.5 py-2.5 text-body-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
   {
     variants: {
       variant: {

package/dist/components/bubble/index.js

@@ -2,12 +2,14 @@
 import {
   Bubble,
   BubbleReaction,
+  BubbleReactionAdd,
   BubbleReactions
 } from "./bubble.js";
 import { bubbleMeta } from "./bubble.meta.js";
 export {
   Bubble,
   BubbleReaction,
+  BubbleReactionAdd,
   BubbleReactions,
   bubbleMeta
 };

package/dist/components/feedback/feedback.js

@@ -109,7 +109,14 @@ function Feedback({
                         value: option.value,
                         "aria-label": option.value,
                         className: "flex-1 text-base",
-                        children: option.label
+                        children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn("inline-flex", rating === option.value && "motion-bloom"),
+                            children: option.label
+                          },
+                          rating === option.value ? "chosen" : "rest"
+                        )
                       },
                       option.value
                     ))

package/dist/components/feedback/feedback.meta.js

@@ -113,6 +113,12 @@ var feedbackMeta = {
       part: "Rating toggles",
       why: "The rating row is a choice among a few similar marks. The eased selected fill is what makes the pick read as made, not just hovered."
     },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "Chosen rating mark",
+      why: "The mark itself answers the pick: it blooms past its size and settles, so choosing reads as a small decision landing rather than a fill changing. Only the chosen mark, only on choosing \u2014 nothing blooms when the form opens or a pick is let go. Expressive: under subtle the fill alone answers."
+    },
     {
       slot: "transition",
       recipe: "motion-tick",

package/dist/components/like-button/index.js

@@ -0,0 +1,7 @@
+// src/components/like-button/index.ts
+import { LikeButton } from "./like-button.js";
+import { likeButtonMeta } from "./like-button.meta.js";
+export {
+  LikeButton,
+  likeButtonMeta
+};

package/dist/components/like-button/like-button.js

@@ -0,0 +1,89 @@
+"use client";
+
+// src/components/like-button/like-button.tsx
+import { useMemo, useState } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { Burst } from "../../motion/Burst.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { Button } from "../button/button.js";
+import { NumberTicker } from "../number-ticker/number-ticker.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON_SIZE = { xs: "icon-xs", sm: "icon-sm", md: "icon" };
+function LikeButton({
+  className,
+  count,
+  format,
+  icon = "heart",
+  tone = "red",
+  label = "Like",
+  variant = "ghost",
+  size = "sm",
+  motion,
+  pressed: pressedProp,
+  defaultPressed = false,
+  onPressedChange,
+  onClick,
+  ...props
+}) {
+  const [innerPressed, setInnerPressed] = useState(defaultPressed);
+  const pressed = pressedProp ?? innerPressed;
+  const [baseline, setBaseline] = useState({ count, pressed });
+  if (!Object.is(count, baseline.count)) setBaseline({ count, pressed });
+  const shown = count === void 0 ? void 0 : count + Number(pressed) - Number(baseline.pressed);
+  const [likes, setLikes] = useState(0);
+  const [armed, setArmed] = useState(false);
+  if (armed) {
+    setArmed(false);
+    if (pressed) setLikes((n) => n + 1);
+  }
+  const formatter = useMemo(() => new Intl.NumberFormat(void 0, format), [format]);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ...props,
+      variant,
+      size: shown === void 0 ? ICON_SIZE[size] : size,
+      className: cn("tabular-nums", className),
+      "aria-pressed": pressed,
+      "data-pressed": pressed ? "" : void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        const next = !pressed;
+        if (pressedProp === void 0) setInnerPressed(next);
+        if (next) setArmed(true);
+        onPressedChange?.(next, event);
+      },
+      "aria-label": props["aria-label"] ?? (shown === void 0 ? label : `${label} ${formatter.format(shown)}`),
+      "data-motion": motionAttribute(motion),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { "--motion-bloom-delay": "90ms" },
+              className: cn("inline-flex", pressed && likes > 0 && "motion-bloom"),
+              "data-palette": pressed ? tone : void 0,
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: icon,
+                  variant: pressed ? "solid" : "regular",
+                  className: cn("size-(--button-icon)", pressed && "text-palette-dot")
+                }
+              )
+            },
+            likes
+          ),
+          /* @__PURE__ */ jsx("span", { "data-palette": tone, className: "contents text-palette-dot", children: /* @__PURE__ */ jsx(Burst, { trigger: likes, motion, className: "[--burst-size:calc(var(--button-icon)*2.25)]" }) })
+        ] }),
+        shown === void 0 ? null : /* @__PURE__ */ jsx(NumberTicker, { value: shown, format, motion })
+      ]
+    }
+  );
+}
+LikeButton.displayName = "LikeButton";
+export {
+  LikeButton
+};