@crewlethq/ui 0.81.2 → 0.83.0

package/dist/PersonRow-V5GTPNVP.css

@@ -0,0 +1,161 @@
+/*
+ * PersonRow: a person or an agent as one row of a list, as a button or as a
+ * listbox option. One design for every list of people.
+ */
+.crewlet-person-row {
+  /* The row's corner. A list inside a rounded panel sets it to the panel's
+     corner less the panel's inset, so the two curves run parallel. */
+  --crewlet-person-row-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--spacing-2);
+  border: 0;
+  border-radius: var(--crewlet-person-row-radius);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  text-align: left;
+  list-style: none;
+  cursor: pointer;
+}
+
+/* One line, for a list that opens under a caret: the name, its detail after
+   it, and the trailing words at the end. */
+.crewlet-person-row--compact {
+  gap: var(--spacing-2);
+  min-height: var(--size-row-md);
+  padding-block: 0;
+}
+
+/*
+ * A ROW SHOWS THE HOVER OVERLAY OR THE CHOSEN TINT, NEVER BOTH: they are the
+ * same property on the same element, and the chosen row keeps its tint under
+ * the pointer.
+ */
+.crewlet-person-row:hover,
+.crewlet-person-row.is-highlighted {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-person-row.is-selected,
+.crewlet-person-row.is-selected:hover {
+  background: var(--color-brand-accent-soft);
+}
+
+/* The row the arrows are on, in a list a field owns: a bar on its start
+   edge, so it is found in a list whose chosen rows are tinted too. */
+.crewlet-person-row.is-highlighted {
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}
+
+.crewlet-person-row:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-person-row:disabled,
+.crewlet-person-row.is-disabled {
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
+/*
+ * One column for every face or glyph, so every name starts on one edge: a
+ * room's 16px glyph started its name a step left of the faces beside it.
+ */
+.crewlet-person-row__face {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-control-md);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-person-row--compact .crewlet-person-row__face {
+  min-width: var(--size-control-sm);
+}
+
+.crewlet-person-row__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-person-row__name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+}
+
+.crewlet-person-row__detail {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-person-row--compact .crewlet-person-row__detail {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-person-row__meta {
+  flex: none;
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+/* The toggle's mark: a plus that is quiet until the row is pointed at, and a
+   check on the accent once the row is chosen. */
+.crewlet-person-row__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  margin-left: auto;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-person-row__meta + .crewlet-person-row__mark {
+  margin-left: 0;
+}
+
+.crewlet-person-row:hover .crewlet-person-row__mark {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.crewlet-person-row.is-selected .crewlet-person-row__mark {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+/*
+ * FORCED COLORS repaints every background to Canvas, which took the chosen
+ * tint and the arrows' row with it. An outline is the one mark the mode
+ * keeps, in the system's own colour for exactly this.
+ */
+@media (forced-colors: active) {
+  .crewlet-person-row.is-selected,
+  .crewlet-person-row.is-highlighted {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/dist/Popover/index.js

@@ -1,5 +1,6 @@
-export { Popover } from '../chunk-KHJIEPZV.js';
+export { Popover } from '../chunk-EC6EUIAD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Presence/index.d.ts

@@ -0,0 +1,2 @@
+export { afterMotion, releaseFocus, runningMotion, usePresence } from './usePresence.js';
+export type { MotionOwnership, Presence, PresenceOptions } from './usePresence.js';

package/dist/Presence/index.js

@@ -0,0 +1,4 @@
+export { afterMotion, releaseFocus, runningMotion, usePresence } from '../chunk-PCAT2EFB.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-4ITETIGZ.js';

package/dist/Presence/usePresence.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Keeps something drawn while it leaves, and says when it has arrived.
+ *
+ * A SURFACE THAT EASES SHUT HAS TO STAY DRAWN UNTIL IT IS SHUT. Unmounted the
+ * moment it is closed, a column that eases its width to nothing eases an
+ * empty box, and the reader sees its content vanish before the motion they
+ * asked for has begun. So the content is kept for as long as the motion runs,
+ * and INERT all the while: it is on its way out, and nothing in it may take
+ * focus, a press or a screen reader's attention.
+ *
+ * THE STYLESHEET SAYS HOW LONG. The wait is for the motion actually running
+ * (`getAnimations()`), whatever the stylesheet set it to, rather than for a
+ * duration written again here: a copy of the duration is a second number that
+ * drifts from the first. A motion replaced mid way (a transition retargeted,
+ * or reversed by a reopen) is waited out in its turn.
+ *
+ * AND IT WAITS ONLY FOR ITS OWN MOTION (`MotionOwnership`): the transitions on
+ * the element ITSELF, and the keyframes the surface names, wherever they run
+ * under it. Never a motion something else inside it happens to run (a meter
+ * filling, a badge arriving), which would hold a rail inert for as long as
+ * the meter took; never a paused one, which would hold it for ever; never an
+ * endless one (a pulse). And never longer than the motion's own remaining
+ * time and a margin, so a tab hidden mid motion, where a browser may not
+ * report the end until it is seen again, still settles.
+ *
+ * NOTHING WAITS WHERE NOTHING MOVES. Under `prefers-reduced-motion: reduce`,
+ * where no motion of its own runs, and where the Web Animations API is
+ * missing, the change goes straight through in the same commit, before any
+ * paint.
+ */
+import { type RefObject } from 'react';
+/** Which motions are a surface's own: the ones its presence waits for. */
+export interface MotionOwnership {
+    /**
+     * The transitions on the element ITSELF, by property: `width`, for a
+     * column that eases its width. Left out, any transition on the element
+     * itself. A transition on an element inside it is never its own.
+     */
+    transitions?: readonly string[] | undefined;
+    /**
+     * The keyframes that are part of the motion, by name, wherever they run
+     * under the element: a rail's words fading in while its edge moves. Left
+     * out, none.
+     */
+    animations?: readonly string[] | undefined;
+}
+/**
+ * The motions of its own running on an element that will end (see
+ * `MotionOwnership`): playing, not paused, not endless, and its own.
+ */
+export declare function runningMotion(element: Element, owned?: MotionOwnership): Animation[];
+/**
+ * Calls `done` once the element's own motion has ended: AT ONCE,
+ * synchronously, where none runs, so a caller in a layout effect draws the
+ * outcome before the first paint, and never later than that motion's
+ * remaining time and a margin. Returns the cancel, which a caller runs when
+ * the wait no longer matters (the thing was opened again).
+ *
+ * A motion cancelled rather than finished (retargeted, reversed) counts as
+ * ended, and whatever of its own runs in its place is waited for in turn.
+ */
+export declare function afterMotion(element: Element | null, done: () => void, owned?: MotionOwnership): () => void;
+/**
+ * Takes focus out of something that is about to turn inert, as it starts to
+ * leave: to `target` where the host names one (the control that brings it
+ * back), and otherwise off the element that held it.
+ *
+ * FOCUS IS NEVER LEFT INSIDE WHAT IS LEAVING. An inert element cannot hold
+ * focus, and a browser that blurs it hands the reader to the top of the
+ * document, with no telling where Tab goes next; one that does not leaves a
+ * keyboard reader typing into a panel that takes nothing. Does nothing when
+ * focus is elsewhere: a reader who has moved on is not pulled back.
+ */
+export declare function releaseFocus(container: Element | null, target?: HTMLElement | null): void;
+export interface PresenceOptions extends MotionOwnership {
+    /**
+     * Makes this change instant: the host knows it is not one the reader made
+     * (a window resized across a breakpoint), so nothing waits for it.
+     */
+    instant?: boolean | undefined;
+}
+export interface Presence {
+    /** Whether to draw it: while it is shown, and while it leaves. */
+    present: boolean;
+    /** Drawn only to finish leaving: make it `inert`. */
+    leaving: boolean;
+    /**
+     * Shown again (never on the first draw) and its motion still running: the
+     * window a stylesheet scopes an entrance to, so the first paint of a page
+     * plays none.
+     */
+    entering: boolean;
+    /**
+     * Shown again BEFORE IT HAD LEFT: entering, from wherever its exit had
+     * reached rather than from nothing, so a stylesheet turns the exit back
+     * instead of playing an entrance over it.
+     */
+    returning: boolean;
+}
+/**
+ * Whether to draw something that is `shown`, and whether it is on its way in
+ * or out, waiting on the motion running on `motion`'s element.
+ *
+ * The element to wait on is the one the stylesheet moves: a column easing its
+ * width, or a rail. It can be the same element the content stands in or an
+ * ancestor of it; it is never the content itself, which is gone once it has
+ * left.
+ */
+export declare function usePresence(shown: boolean, motion: RefObject<Element | null>, { transitions, animations, instant }?: PresenceOptions): Presence;

package/dist/PresenceStack/index.js

@@ -1,9 +1,9 @@
-export { PresenceStack } from '../chunk-6LN64KGG.js';
+export { PresenceStack } from '../chunk-F7HZYTZT.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-EFX2YC5T.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{PresenceStack-ZV67BH4V.css → PresenceStack-2DTYRADY.css}

@@ -27,12 +27,10 @@
   font: inherit;
 }
 
-.crewlet-presence-stack > .crewlet-presence-stack__member--human {
-  border-radius: var(--radius-circle);
-}
-
-.crewlet-presence-stack > .crewlet-presence-stack__member--agent {
-  border-radius: var(--radius-sm);
+/* The face's own corner, which the component sets from Avatar's ladder: one
+   shape for people and agents. */
+.crewlet-presence-stack > .crewlet-presence-stack__member {
+  border-radius: var(--crewlet-presence-stack-corner);
 }
 
 button.crewlet-presence-stack__member {

package/dist/PresenterView/index.js

@@ -1,12 +1,12 @@
-export { PresenterView, formatStopwatch } from '../chunk-PRN5IP2R.js';
+export { PresenterView, formatStopwatch } from '../chunk-LMEMH6DO.js';
 import '../chunk-5AJR6X75.js';
-import '../chunk-RMEBFYL7.js';
+import '../chunk-O6EV6GKI.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PricingCard/index.js

@@ -1,4 +1,4 @@
-export { PricingCard } from '../chunk-D7G2QGET.js';
-import '../chunk-VERJCAJ4.js';
+export { PricingCard } from '../chunk-X3US25XJ.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Principal/index.js

@@ -1,4 +1,4 @@
-export { PRINCIPAL_KINDS, PrincipalAvatar } from '../chunk-N2BF272H.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
+export { PRINCIPAL_KINDS, PrincipalAvatar } from '../chunk-HF5L56YQ.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PrincipalPicker/index.js

@@ -1,16 +1,16 @@
-export { PrincipalPicker } from '../chunk-CFTBESST.js';
-import '../chunk-6EWNMSS4.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-N2BF272H.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
-import '../chunk-FB3TCNQP.js';
+export { PrincipalPicker } from '../chunk-Q6TCUSQA.js';
+import '../chunk-NNZRTR5M.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-HF5L56YQ.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ProposalCard/index.js

@@ -1,24 +1,24 @@
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-BLGBD2D2.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-P7HMY3BQ.js';
 import '../chunk-ZWCK4N4L.js';
-import '../chunk-4XF7ENQA.js';
+import '../chunk-AOJ6ZA77.js';
 import '../chunk-LR4IWUWQ.js';
-import '../chunk-RTMNULTL.js';
-import '../chunk-VERJCAJ4.js';
-import '../chunk-CYQBDZ6M.js';
-import '../chunk-4AUTALJA.js';
+import '../chunk-FLW5U7YS.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-LMQG3VPG.js';
-import '../chunk-222VILSP.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-YQ7Q52XU.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-LVJGN5II.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-IVTQWOXV.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-ULYHDP7U.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ReactionBar/ReactionBar.d.ts

@@ -0,0 +1,84 @@
+import type { ReactNode } from 'react';
+import { type EmojiPickerProps } from '../EmojiPicker/index.js';
+/** One emoji's reactions on a message. */
+export interface ReactionSummary {
+    emoji: string;
+    /** How many reacted with it, the reader included. */
+    count: number;
+    /** Whether the reader is one of them. */
+    mine: boolean;
+    /**
+     * Who else reacted, by name, in the order they did; the reader is left out
+     * (`mine` says whether they reacted). Optional: without it the pill says
+     * how many reacted rather than who.
+     */
+    people?: readonly string[] | undefined;
+    /** The emoji's name, for its pill's accessible name. Read from the picker's names by default. */
+    name?: string | undefined;
+}
+export interface ReactionBarLabels {
+    /** Names the row of pills. */
+    group: string;
+    /** The reader, who always leads the list of who reacted. */
+    you: string;
+    /** Those not named: "1 other", "2 others". */
+    others: (count: number) => string;
+    /** Everyone, where no names are known: "1 member", "3 members". */
+    members: (count: number) => string;
+    /** A pill's hint: "You and Product Manager reacted with 👀". */
+    reacted: (who: string, emoji: string) => string;
+    /** A pill's accessible name: "eyes: You and Product Manager reacted". */
+    pill: (name: string, who: string) => string;
+}
+export declare const REACTION_BAR_LABELS: ReactionBarLabels;
+/**
+ * Who reacted, in words, with the reader first: "You, Product Manager and 1
+ * other". In the order the data held them the reader fell mid sentence
+ * ("Product Manager and You"). Without names it counts: "You and 2 others",
+ * "3 members".
+ */
+export declare function reactionWho(reaction: ReactionSummary, labels?: ReactionBarLabels): string;
+export interface ReactionBarProps {
+    reactions: readonly ReactionSummary[];
+    /** Adds the reader's reaction with that emoji, or takes it back. */
+    onToggle: (emoji: string) => void;
+    /** After the pills: an `AddReaction`. */
+    add?: ReactNode;
+    /**
+     * Why the reader cannot react here ("Join the room to react."): the pills
+     * still say who reacted, are marked unavailable, and add the reason to
+     * their hint rather than toggling.
+     */
+    disabledReason?: string | undefined;
+    labels?: Partial<ReactionBarLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * The reactions under a message, one pill to an emoji with its count, then
+ * the control that adds one.
+ *
+ * AT REST A PILL IS A FILL, NOT A FRAME: the soft fill and no edge, so a row
+ * of reactions reads as a quiet strip. Under the pointer the pill drops its
+ * fill for the strong edge. The reader's own is the accent's soft fill inside
+ * an accent ring with its count at the medium weight, so it differs from the
+ * others by more than its hue. Each pill is a toggle (`aria-pressed`), and its
+ * hint says who reacted, the reader first.
+ */
+export declare function ReactionBar({ reactions, onToggle, add, disabledReason, labels: overrides, className }: ReactionBarProps): import("react").JSX.Element | null;
+export interface AddReactionProps extends Pick<EmojiPickerProps, 'onPick' | 'onOpenChange' | 'side' | 'groups'> {
+    /** The pill's name and hint, and the picker's: "Add a reaction" by default. */
+    label?: string | undefined;
+    /** Which edge of the pill the picker lines up with, `start` by default. */
+    align?: EmojiPickerProps['align'];
+    /**
+     * Why the reader cannot react here, as `ReactionBar` takes it: the pill is
+     * marked unavailable, does not open the picker, and adds the reason to its
+     * hint.
+     */
+    disabledReason?: string | undefined;
+}
+/**
+ * The pill after a message's reactions that opens the emoji picker. Inside a
+ * `ChatMessage` it is quiet until the row is pointed at, focused or tapped.
+ */
+export declare function AddReaction({ label, align, disabledReason, ...picker }: AddReactionProps): import("react").JSX.Element;

package/dist/ReactionBar/index.d.ts

@@ -0,0 +1,4 @@
+import '../ChatMessage/ChatScale.css';
+import './ReactionBar.css';
+export { AddReaction, REACTION_BAR_LABELS, ReactionBar, reactionWho } from './ReactionBar.js';
+export type { AddReactionProps, ReactionBarLabels, ReactionBarProps, ReactionSummary } from './ReactionBar.js';

package/dist/ReactionBar/index.js

@@ -0,0 +1,17 @@
+export { AddReaction, REACTION_BAR_LABELS, ReactionBar, reactionWho } from '../chunk-4DEKONVJ.js';
+import '../chunk-TDFLCUBE.js';
+import '../chunk-SPNTUQBV.js';
+import '../chunk-EC6EUIAD.js';
+import '../chunk-7ZSEUO5Q.js';
+import '../chunk-HTS5RJ7S.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-O7N6W52M.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ReactionBar-XXI4V7XG.css

@@ -0,0 +1,93 @@
+/*
+ * A message's reactions: one pill to an emoji, then the add pill. A pill at
+ * rest is a fill and no frame; the edge arrives under the pointer.
+ */
+
+.crewlet-reaction-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-reaction {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  min-width: 44px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 0 var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+  background: var(--color-fill-soft);
+  color: var(--color-text-primary);
+  font: inherit;
+  font-size: var(--crewlet-chat-meta);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* The emoji is the pill's picture and the count its caption: at the count's
+   size the emoji read smaller than the number beside it. */
+.crewlet-reaction__emoji {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-reaction__count {
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-regular);
+}
+
+/* The pointed pill drops its fill and takes the strong edge. */
+.crewlet-reaction:hover {
+  border-color: var(--color-edge-strong);
+  background: transparent;
+}
+
+/* Yours: the accent's soft fill, its ink and a heavier count, ringed in the
+   accent, so it differs from the others by more than its hue. */
+.crewlet-reaction.is-mine {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-reaction.is-mine:hover {
+  background: var(--color-brand-accent-soft-strong);
+}
+
+.crewlet-reaction.is-mine .crewlet-reaction__count {
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-reaction[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.crewlet-reaction:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The add pill: the glyph alone, in the quiet ink. */
+.crewlet-reaction.crewlet-reaction--add {
+  min-width: 32px;
+  padding: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-reaction.crewlet-reaction--add[aria-expanded='true'] {
+  background: var(--color-surface-pressed);
+  color: var(--color-text-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-reaction {
+    transition: none;
+  }
+}

package/dist/RecordChip/index.js

@@ -1,6 +1,7 @@
-export { RecordChip, RecordChipList } from '../chunk-BFM5G2Z6.js';
-import '../chunk-KHJIEPZV.js';
+export { RecordChip, RecordChipList } from '../chunk-ZPTKAYJK.js';
+import '../chunk-EC6EUIAD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RefusalCard/index.js

@@ -1,10 +1,10 @@
-export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-UYF2B2TH.js';
-import '../chunk-RTMNULTL.js';
-import '../chunk-VERJCAJ4.js';
-import '../chunk-CYQBDZ6M.js';
-import '../chunk-4AUTALJA.js';
+export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-7ELFH3RJ.js';
+import '../chunk-FLW5U7YS.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-MLDTLZAO.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';