@sableui/react 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,136 @@
 # What's new
 
+## 0.16.0
+
+Five pieces of the calm, product-chrome look that AI and B2B tools share:
+tick-bar budgets, pastel art, filled fields, an inset frame and a dither
+texture. Each is told through the theme, so every preset can wear it.
+
+- **New: segmented meters.** `<Meter segments={40} />` draws the bar as a row
+  of ticks — a spend limit, credits left, a lead score, months of data — read
+  at a glance. Any reading above `min` shows at least one tick, and when the
+  value changes the fill runs through the ticks from the edge it is leaving.
+  Size the count to the track (about one tick per 8px) so a tick stays taller
+  than it is wide. `shape="ring"` ignores it.
+- **New: `GradientArt intensity="soft"`.** The same art as a pastel of itself:
+  lifted and quieted, bright in dark mode too. It is a stage for floating
+  chips, logo tiles and card header bands, not a surface for text.
+- **New: the field tokens, `field` and `field-border`.** Every text field —
+  Input, Textarea, Select, Combobox, SearchInput, NumberField, OTPField,
+  DatePicker, InputGroup, ChatComposer and CommandMenuTrigger — now paints
+  this pair, outlined on the card by default exactly as before. A theme fills
+  them all at once with `--theme-field: var(--muted)` and
+  `--theme-field-border: transparent`. Canvas has a matching **Fields**
+  control (Preset / Outline / Filled), and presets may set both hooks.
+  A hand-built field wearing `border-field-border` is caught by
+  `lookalike-control` like one wearing `border-input`.
+- **New: `AppShell frame="inset"`.** From `lg`, the rail and a small gap sit on
+  one ground and main becomes a rounded, bordered panel that scrolls inside
+  itself while the rail stays put. The Sidebar in the slot drops its border
+  and fills the row, and its footer rule spans the content column rather than
+  running out into the gap; below `lg` nothing changes. The ground is a new derived
+  token, `shell-ground` — one step off the rail, so the panel reads as lifted
+  even in themes whose rail is the page colour; tune it with
+  `--theme-shell-ground`. Inset moves the desktop scroll from `window` to
+  `#main-content`, so scroll listeners (restoration, scroll-to-top, scrollspy)
+  must target `main`.
+- **New utility: `texture-dither`.** A faint field of tiny squares that
+  dissolves, painted in `border-strong` so it follows every theme — decoration
+  for behind an empty state or a page header. `--dither-fade`,
+  `--dither-size` and `--dither-color` tune it.
+- **Status and tone colours at graphic strength.** Meters, segmented bars,
+  status dots, chart series and the soft tints behind badges, banners and
+  notes were painted with the label fills — dark enough to carry white text,
+  so in light mode they read brown, forest green and plum. They now read new
+  `-mark` tokens (`success-mark`, `tone-warning-mark`, `destructive-mark`,
+  `tone-info-mark`, `tone-1/2/3-mark`): the same hue lifted and saturated,
+  held to a 2:1 visibility floor on the page instead of a text ratio. Every
+  bundled theme tunes its own in both modes, and keeps its character —
+  Ember's olive, Poppy's pastels and Atelier's grey tone stay theirs; a
+  preset sets `--theme-*-mark` or gets one derived from its fill. Labels are
+  unchanged: solid badges, banners and buttons keep their fills, and text
+  keeps `-text`. `markFor` (from `@sableui/react/presets`) derives a mark the
+  same way, and Canvas moves the marks with any tone it generates.
+- **Canvas: a brand colour no longer flattens the tones.** Info is treated
+  as the status it is: it leans toward the brand within the blues instead of
+  being repainted (Brand only made it the brand, so a green brand's info read
+  as success; the schemes spun it anywhere). A status also keeps 25° off the
+  brand's own hue when its band allows, so a green brand gets a teal success
+  rather than a second copy of itself. And Brand only is a family you can tell
+  apart — a deep brand, a lighter neighbour and a muted sibling — instead of
+  one hue in four near-identical depths.
+- **Table:** `numeric` on TableHead and TableCell is now documented.
+- **New: search matches light up.** Combobox and CommandMenu paint the typed
+  text in each row's label, on a tint of the theme's `highlight`. It uses the CSS
+  Custom Highlight API, so rows get no `<mark>` wrappers and their accessible
+  names stay whole; browsers without it simply show no paint. Combobox lights
+  only what was typed, not a label a pick filled in. `highlightMatches={false}`
+  turns it off on either.
+- **New hook: `useMatchHighlight(query, { selector })`.** The same paint for a
+  results list you filter yourself, such as a SearchInput over a table: it
+  returns a callback ref for the results container.
+- **Textarea:** text you are editing no longer rewraps above the caret when
+  the field sits inside a `text-pretty` or `text-balance` block
+  (`text-wrap-style: stable`). ChatComposer gets the same fix.
+
+## 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/bin/sable-lint.mjs

@@ -44,7 +44,11 @@ if (!existsSync(registryPath)) {
 }
 const REGISTRY = JSON.parse(readFileSync(registryPath, "utf8"))
 
-const semanticTokens = new Set((REGISTRY.tokens?.semantic ?? []).map((t) => t.name))
+// Derived colours (`tone-warning-mark`, `field`, `shell-ground`…) are real tokens
+// too: every theme gets them, so a utility naming one is not a typo.
+const semanticTokens = new Set(
+	[...(REGISTRY.tokens?.semantic ?? []), ...(REGISTRY.tokens?.derived ?? [])].map((t) => (typeof t === "string" ? t : t.name)),
+)
 // Motion token NAMES are reassembled from the registry's durations/easings lists.
 // A test in the package asserts this reconstruction equals _contract.ts exactly,
 // so the consumer linter can never validate against a drifted vocabulary.

package/dist/{_contract-CkqXDVww.d.ts → _contract-CDa9-NdB.d.ts}

@@ -147,6 +147,52 @@ declare const ART_TOKENS: readonly ["art-1", "art-2", "art-3", "art-4", "art-5",
  *   2 doubles it, for a theme that wants every colour to read as its own.
  */
 declare const PALETTE_TOKENS: readonly ["palette-harmony"];
+/**
+ * The text field's surface — derived like the edges, with a `--theme-*` hook.
+ *
+ * - `field` is the fill of every text-entry field (Input, Textarea, Select,
+ *   Combobox, SearchInput, InputGroup, ChatComposer…). It defaults to `card`.
+ * - `field-border` is that field's outline. It defaults to `input`.
+ *
+ * Together they are the one choice a theme makes about how a field reads:
+ * outlined on the card (the default), or filled — `--theme-field: var(--muted)`
+ * with `--theme-field-border: transparent` — the borderless grey well some
+ * product UIs use for every input. Every field wears the pair through
+ * lib/field-shell, so the choice reaches them all at once instead of being
+ * restyled per control.
+ */
+declare const FIELD_TOKENS: readonly ["field", "field-border"];
+/**
+ * The ground of an inset app frame — derived, with a `--theme-*` hook.
+ *
+ * `<AppShell frame="inset">` lifts main into a rounded panel and paints the
+ * rail and the gap around it as one surface. That surface cannot simply be
+ * `sidebar`: most themes paint the rail the page's own colour, so the panel
+ * sat on a ground of the same colour and only its hairline told them apart.
+ * `shell-ground` is one small step off the rail toward its ink, so the panel
+ * reads as lifted in every theme, and a theme sets `--theme-shell-ground` for
+ * a stronger or tinted ground.
+ */
+declare const APP_SHELL_TOKENS: readonly ["shell-ground"];
+/**
+ * Status and tone colours at GRAPHIC strength — derived, with `--theme-*` hooks.
+ *
+ * Each status colour already comes in two: the fill, which carries a label
+ * (dark enough for white ink at 4.5:1 in light mode), and `-text`, the colour
+ * as ink on a surface. Neither is right for a mark that carries no text — a
+ * meter's fill, a segmented bar, a status dot, a chart series, the soft tint
+ * behind a badge. Those were painted with the label fill, so in light mode
+ * every one of them was a deep brown, forest green or plum: muddy, and 5–9:1
+ * against the page when a graphic needs far less.
+ *
+ * A mark is the same hue lifted and saturated. It is held to a VISIBILITY floor
+ * of 2:1 against `background` and `card` (NON_TEXT_HARD_FLOOR, the `graphic`
+ * tier in contrast.ts), not to a text ratio: every mark that uses it sits
+ * beside text that states the same thing (a meter's reading, a dot's label).
+ * A graphic that is the ONLY carrier of its meaning still owes WCAG 1.4.11's
+ * 3:1 — use the fill, or add the text.
+ */
+declare const MARK_TOKENS: readonly ["destructive-mark", "success-mark", "tone-warning-mark", "tone-info-mark", "tone-1-mark", "tone-2-mark", "tone-3-mark"];
 /**
  * UI type tiers (mode-independent) — the chrome typography register.
  *
@@ -193,4 +239,4 @@ interface ThemeManifest {
     };
 }
 
-export { ART_TOKENS as A, DENSITY_TOKENS as D, MOTION_TOKENS as M, PALETTE_TOKENS as P, RADIUS_TOKENS as R, SEMANTIC_TOKENS as S, type ThemeManifest as T, WORKSPACE_SURFACE_TOKENS as W, type ThemeMode as a, type DensityToken as b, type MotionToken as c, RHYTHM_TOKENS as d, type RadiusToken as e, type RhythmToken as f, type SemanticToken as g, TYPE_OVERLINE_TOKENS as h, TYPE_REFINEMENT_TOKENS as i, TYPE_SCALE_TOKENS as j, TYPE_UI_TOKENS as k, type TypeOverlineToken as l, type TypeRefinementToken as m, type TypeScaleToken as n, type TypeUiToken as o, type WorkspaceSurfaceToken as p };
+export { APP_SHELL_TOKENS as A, DENSITY_TOKENS as D, FIELD_TOKENS as F, MARK_TOKENS as M, PALETTE_TOKENS as P, RADIUS_TOKENS as R, SEMANTIC_TOKENS as S, type ThemeManifest as T, WORKSPACE_SURFACE_TOKENS as W, type ThemeMode as a, ART_TOKENS as b, type DensityToken as c, MOTION_TOKENS as d, type MotionToken as e, RHYTHM_TOKENS as f, type RadiusToken as g, type RhythmToken as h, type SemanticToken as i, TYPE_OVERLINE_TOKENS as j, TYPE_REFINEMENT_TOKENS as k, TYPE_SCALE_TOKENS as l, TYPE_UI_TOKENS as m, type TypeOverlineToken as n, type TypeRefinementToken as o, type TypeScaleToken as p, type TypeUiToken as q, type WorkspaceSurfaceToken as r };

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/blocks/wallet-block.js

@@ -11,6 +11,7 @@ var activity = [
   { title: "Refund", detail: "Order 1042 \xB7 Yesterday", amount: "-24.00", tone: "2" },
   { title: "Payout", detail: "To checking \xB7 Mon", amount: "-850.00", tone: "3" }
 ];
+var TONE_MARK = { "1": "bg-tone-1-mark", "2": "bg-tone-2-mark", "3": "bg-tone-3-mark" };
 function WalletBlock({ className, framed = true, onSend, onReceive }) {
   return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
@@ -30,8 +31,7 @@ function WalletBlock({ className, framed = true, onSend, onReceive }) {
             "span",
             {
               "aria-hidden": true,
-              className: "block size-8 rounded-full",
-              style: { background: `oklch(from var(--tone-${item.tone}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h)` }
+              className: cn("block size-8 rounded-full", TONE_MARK[item.tone])
             }
           ),
           title: item.title,

package/dist/components/app-shell/app-shell-frame.js

@@ -0,0 +1,16 @@
+"use client";
+
+// src/components/app-shell/app-shell-frame.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var AppShellFrameContext = createContext(null);
+function AppShellFrameProvider({ frame, children }) {
+  return /* @__PURE__ */ jsx(AppShellFrameContext.Provider, { value: frame, children });
+}
+function useAppShellFrame() {
+  return useContext(AppShellFrameContext);
+}
+export {
+  AppShellFrameProvider,
+  useAppShellFrame
+};

package/dist/components/app-shell/app-shell-main.js

@@ -0,0 +1,12 @@
+"use client";
+
+// src/components/app-shell/app-shell-main.tsx
+import { useScrollActivity } from "../../lib/use-scroll-activity.js";
+import { jsx } from "react/jsx-runtime";
+function AppShellMain({ scrolls, ...props }) {
+  const trackScroll = useScrollActivity();
+  return /* @__PURE__ */ jsx("main", { ref: scrolls ? trackScroll : void 0, ...props });
+}
+export {
+  AppShellMain
+};

package/dist/components/app-shell/app-shell.js

@@ -1,6 +1,8 @@
 // src/components/app-shell/app-shell.tsx
 import { cn } from "../../lib/cn.js";
 import { AppShellDock } from "./app-shell-dock.js";
+import { AppShellFrameProvider } from "./app-shell-frame.js";
+import { AppShellMain } from "./app-shell-main.js";
 import { SkipLink } from "./skip-link.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function AppShell({
@@ -10,18 +12,27 @@ function AppShell({
   bottomNav,
   dock,
   overlays,
+  frame = "flush",
   className,
   children,
   ...rest
 }) {
+  const inset = frame === "inset";
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-frame": inset ? "inset" : void 0,
       className: cn(
         // `overflow-x-clip` (not `-hidden`) contains horizontal bleed WITHOUT
         // establishing a scroll container — `-hidden` forces `overflow-y: auto`,
         // which breaks `position: sticky` on a descendant Sidebar.
         "flex min-h-screen flex-col overflow-x-clip bg-background text-foreground",
+        // Inset, from lg: the shell IS the viewport and never scrolls — main
+        // does. The ground is the rail's surface, so the rail and the gap
+        // around the panel read as one plane. A page-surface rail (Sidebar
+        // surface="page") is page-coloured, so the ground follows it and the
+        // panel's border carries the lift.
+        inset && "lg:h-dvh lg:min-h-0 lg:bg-shell-ground lg:[&:has(>[data-app-shell-body]>[data-surface=page])]:bg-background",
         className
       ),
       ...rest,
@@ -29,16 +40,29 @@ function AppShell({
         /* @__PURE__ */ jsx(SkipLink, {}),
         banners ? /* @__PURE__ */ jsx("div", { className: "relative z-(--z-nav)", children: banners }) : null,
         header,
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
-          sidebar,
+        /* @__PURE__ */ jsxs("div", { "data-app-shell-body": inset ? "" : void 0, className: "flex min-h-0 flex-1", children: [
+          inset ? /* @__PURE__ */ jsx(AppShellFrameProvider, { frame: "inset", children: sidebar }) : sidebar,
           /* @__PURE__ */ jsx(
-            "main",
+            AppShellMain,
             {
               id: "main-content",
+              scrolls: inset,
+              tabIndex: inset ? -1 : void 0,
               style: { containerType: "inline-size" },
               className: cn(
                 "min-w-0 flex-1",
-                bottomNav && "pb-[calc(var(--nav-height)+env(safe-area-inset-bottom,0px))] lg:pb-0"
+                bottomNav && "pb-[calc(var(--nav-height)+env(safe-area-inset-bottom,0px))] lg:pb-0",
+                // The inset panel. A spacing-step gap on the open sides (the rail
+                // is the leading one). Banners and the dock are in flow in the
+                // shell's column, so the bottom gap already sits above a dock.
+                // Sticky children stick to the panel's top, and the overflow
+                // clips them to its rounded corners. A resting surface: a hairline
+                // edge and the subtlest raise, never a floating shadow.
+                inset && cn(
+                  "outline-none lg:m-2 lg:overflow-y-auto lg:overscroll-contain scrollbar-quiet",
+                  "lg:rounded-lg lg:border lg:border-border lg:bg-background lg:shadow-sm",
+                  sidebar && "lg:ms-0"
+                )
               ),
               children
             }