@sableui/react 0.14.0 → 0.16.0

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

@@ -15,7 +15,12 @@ var appShellMeta = {
     "dock",
     "player bar",
     "now playing",
-    "persistent"
+    "persistent",
+    "inset",
+    "inset frame",
+    "floating panel",
+    "rounded content",
+    "scroll container"
   ],
   usage: {
     description: "Use AppShell as the outer product frame for authenticated or app-like experiences. It coordinates responsive chrome slots and guarantees a skip link plus main landmark; put route content inside the children and let AppHeader, Sidebar, BottomNav, and Banner own their own semantics.",
@@ -36,10 +41,23 @@ var appShellMeta = {
         guidance: "do",
         description: "Wrap EVERY return of a route in its own Page or Region \u2014 including early returns for loading, empty and error states. AppShell's <main> deliberately carries no padding (it is a frame, and padding belongs to the region that chose the width), so a route that returns a bare spinner or error renders flush against the chrome. This is the most common conversion bug: the happy path gets a Page, the three early returns do not."
       },
+      {
+        guidance: "do",
+        description: `Use frame="inset" for dense, multi-pane product apps \u2014 a CRM, an issue tracker, an AI workspace \u2014 where framing the content as one raised panel on the rail's ground helps it read as the workspace and the rail as chrome. Keep the Sidebar on surface="rail" so its tint is the ground. Inset moves the page scroll from the window to <main id="main-content"> on desktop: point scroll listeners, scroll restoration and scroll-to-top at that element, not window.`
+      },
       {
         guidance: "dont",
         description: "Nest AppShell inside route cards or panels. It is page chrome, not local content."
       },
+      {
+        guidance: "dont",
+        description: "Wrap a route in its own h-full overflow-y-auto box inside an inset shell. main is already the page's scroll container; a second one traps the scrollbar inside a smaller box and breaks sticky headers and the skip link's scroll target. Scroll a genuinely separate pane (a list beside a detail view) with Scroller.",
+        instead: ["Scroller"]
+      },
+      {
+        guidance: "dont",
+        description: 'Combine frame="inset" with a full-width header bar above the rail. The inset ground is the rail running the full height of the window; a bar across the top cuts it off. Use the flush frame with Sidebar surface="page" for that layout.'
+      },
       {
         guidance: "dont",
         description: "Put desktop-only navigation in the mobile header slot or mobile-only controls in the sidebar slot."
@@ -64,7 +82,7 @@ var appShellMeta = {
       {
         name: "Main",
         required: true,
-        description: "The route content landmark with id main-content."
+        description: 'The route content landmark with id main-content. With frame="inset", from lg it is a rounded, bordered panel that scrolls inside itself.'
       },
       {
         name: "Bottom nav",
@@ -113,6 +131,12 @@ var appShellMeta = {
       name: "overlays",
       type: "ReactNode",
       description: "Floating overlays \u2014 a message launcher, FAB, or modal mount points."
+    },
+    {
+      name: "frame",
+      type: '"flush" | "inset"',
+      default: '"flush"',
+      description: `How the desktop frame (lg and up) holds the content; below lg both are the same mobile layout with page scroll. "flush": main sits on the page beside the rail and the document scrolls. "inset": the shell fills the viewport and paints the shell-ground token (one step off the rail's surface, tunable with --theme-shell-ground) behind the rail and around the panel; main becomes a rounded-lg panel with a hairline border and shadow-sm, inset by a spacing step from the window edges, that scrolls inside itself (scrollbar-quiet) while the rail stays put. The Sidebar in the sidebar slot drops its right border and fills the row. main stays the #main-content target (tabIndex -1, so the skip link lands focus in the scroller) and the inline-size query container; sticky children stick to the panel's top; banners and the dock stay in flow, so the panel's bottom gap sits above a dock. With Sidebar surface="page" the ground is the page colour and the panel's border alone lifts it.`
     }
   ],
   subcomponents: [
@@ -126,9 +150,10 @@ var appShellMeta = {
     "Renders a skip link to #main-content as the first focusable element.",
     'Wraps content in a <main id="main-content"> landmark.',
     "Slot components own their own ARIA (nav landmarks, labels).",
-    "The dock follows <main> in DOM order, so keyboard and screen-reader users reach the player after the page content, not before it."
+    "The dock follows <main> in DOM order, so keyboard and screen-reader users reach the player after the page content, not before it.",
+    'With frame="inset", <main> is the desktop scroll container and takes tabIndex -1: the skip link moves focus into it, so PageDown and the arrow keys scroll the content, without adding a tab stop.'
   ],
-  tokensUsed: ["background", "foreground", "primary", "primary-foreground"],
+  tokensUsed: ["background", "foreground", "primary", "primary-foreground", "sidebar", "shell-ground", "border"],
   examples: [
     {
       label: "Full frame",
@@ -154,6 +179,65 @@ var appShellMeta = {
   <Region max="feed">
     <PageHeader title="Home" description="Latest posts from people you follow." />
   </Region>
+</AppShell>`
+    },
+    {
+      label: "Inset frame",
+      code: `<AppShell
+  frame="inset"
+  header={<AppHeader title="Pipeline" />}
+  sidebar={
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarBrand mark={<Icon name="gem" variant="solid" />} label="Relay" render={<Link to="/" />} />
+      </SidebarHeader>
+      <SidebarNav>
+        <SidebarItem icon={<Icon name="inbox" />} label="Inbox" render={<Link to="/inbox" />} />
+        <SidebarItem icon={<Icon name="user" />} label="People" active render={<Link to="/people" />} />
+        <SidebarItem icon={<Icon name="folder" />} label="Companies" render={<Link to="/companies" />} />
+      </SidebarNav>
+    </Sidebar>
+  }
+  bottomNav={
+    <BottomNav>
+      <BottomNavItem icon={<Icon name="inbox" />} label="Inbox" render={<Link to="/inbox" />} />
+      <BottomNavItem icon={<Icon name="user" />} label="People" active render={<Link to="/people" />} />
+      <BottomNavItem icon={<Icon name="folder" />} label="Companies" render={<Link to="/companies" />} />
+    </BottomNav>
+  }
+>
+  <Page max="wide" gap={4} className="py-6">
+    <PageHeader
+      title="People"
+      description="Everyone in your pipeline, newest first."
+      actions={<Button><Icon name="plus" />Add person</Button>}
+    />
+    <Card>
+      <CardContent flush>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Company</TableHead>
+              <TableHead numeric>Deals</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>Ada Lovelace</TableCell>
+              <TableCell>Northwind</TableCell>
+              <TableCell numeric>4</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Grace Hopper</TableCell>
+              <TableCell>Harbor Labs</TableCell>
+              <TableCell numeric>2</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  </Page>
 </AppShell>`
     },
     {

package/dist/components/area-chart/area-chart.meta.js

@@ -176,7 +176,12 @@ var areaChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

package/dist/components/attachment/attachment.meta.js

@@ -146,7 +146,8 @@ var attachmentMeta = {
     "destructive",
     "overlay",
     "overlay-foreground",
-    "ring"
+    "ring",
+    "destructive-mark"
   ],
   motion: [
     {

package/dist/components/attachment/attachment.variants.js

@@ -13,7 +13,7 @@ var attachmentVariants = cva(
       status: {
         idle: "border-border bg-card",
         uploading: "border-border bg-card",
-        error: "border-destructive/40 bg-destructive/5"
+        error: "border-destructive-mark/40 bg-destructive-mark/5"
       },
       interactive: {
         true: "hover:border-border-strong",

package/dist/components/badge/badge.meta.js

@@ -137,7 +137,14 @@ var badgeMeta = {
     "tone-info-foreground",
     "success-foreground",
     "tone-warning-foreground",
-    "destructive-foreground"
+    "destructive-foreground",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   a11y: [
     "Badges are static text by default; do not rely on color alone for meaning.",

package/dist/components/badge/badge.variants.js

@@ -21,13 +21,13 @@ var MATRIX = {
   // mixed from them fell under 4.5:1 (Meridian dark destructive, 3.8:1).
   soft: {
     neutral: "bg-secondary text-secondary-foreground",
-    "3": "bg-tone-3/15 text-[color-mix(in_oklch,var(--tone-3)_75%,var(--foreground))]",
-    "2": "bg-tone-2/15 text-[color-mix(in_oklch,var(--tone-2)_75%,var(--foreground))]",
-    "1": "bg-tone-1/15 text-[color-mix(in_oklch,var(--tone-1)_75%,var(--foreground))]",
-    info: "bg-tone-info/15 text-[color-mix(in_oklch,var(--tone-info-text)_75%,var(--foreground))]",
-    success: "bg-success/15 text-[color-mix(in_oklch,var(--success-text)_75%,var(--foreground))]",
-    warning: "bg-tone-warning/15 text-[color-mix(in_oklch,var(--tone-warning-text)_75%,var(--foreground))]",
-    destructive: "bg-destructive/15 text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]",
+    "3": "bg-tone-3-mark/15 text-[color-mix(in_oklch,var(--tone-3)_75%,var(--foreground))]",
+    "2": "bg-tone-2-mark/15 text-[color-mix(in_oklch,var(--tone-2)_75%,var(--foreground))]",
+    "1": "bg-tone-1-mark/15 text-[color-mix(in_oklch,var(--tone-1)_75%,var(--foreground))]",
+    info: "bg-tone-info-mark/15 text-[color-mix(in_oklch,var(--tone-info-text)_75%,var(--foreground))]",
+    success: "bg-success-mark/15 text-[color-mix(in_oklch,var(--success-text)_75%,var(--foreground))]",
+    warning: "bg-tone-warning-mark/15 text-[color-mix(in_oklch,var(--tone-warning-text)_75%,var(--foreground))]",
+    destructive: "bg-destructive-mark/15 text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]",
     ...families("soft")
   },
   outline: {

package/dist/components/banner/banner.meta.js

@@ -131,7 +131,12 @@ var bannerMeta = {
     "tone-1",
     "tone-1-foreground",
     "destructive",
-    "destructive-foreground"
+    "destructive-foreground",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark"
   ],
   a11y: [
     "Static banners render as a labelled region (role=region); set `live` to announce dynamic status bars (role=status / role=alert) when they appear or change.",

package/dist/components/banner/banner.variants.js

@@ -20,11 +20,11 @@ var bannerVariants = cva(
     compoundVariants: [
       // Soft — a quiet tint of the tone (the default announcement look).
       { tone: "neutral", appearance: "soft", class: "bg-secondary text-secondary-foreground" },
-      { tone: "info", appearance: "soft", class: "bg-tone-info/15 text-foreground" },
-      { tone: "success", appearance: "soft", class: "bg-success/15 text-foreground" },
-      { tone: "warning", appearance: "soft", class: "bg-tone-warning/15 text-foreground" },
-      { tone: "1", appearance: "soft", class: "bg-tone-1/15 text-foreground" },
-      { tone: "destructive", appearance: "soft", class: "bg-destructive/15 text-foreground" },
+      { tone: "info", appearance: "soft", class: "bg-tone-info-mark/15 text-foreground" },
+      { tone: "success", appearance: "soft", class: "bg-success-mark/15 text-foreground" },
+      { tone: "warning", appearance: "soft", class: "bg-tone-warning-mark/15 text-foreground" },
+      { tone: "1", appearance: "soft", class: "bg-tone-1-mark/15 text-foreground" },
+      { tone: "destructive", appearance: "soft", class: "bg-destructive-mark/15 text-foreground" },
       // Solid — the full tone fill with its paired ink, for loud states.
       { tone: "neutral", appearance: "solid", class: "bg-foreground text-background" },
       { tone: "info", appearance: "solid", class: "bg-tone-info text-tone-info-foreground" },

package/dist/components/bar-chart/bar-chart.meta.js

@@ -199,7 +199,12 @@ var barChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

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/caret-menu/caret-menu.js

@@ -124,12 +124,11 @@ function CaretMenu({ trigger, label, status, children, className }) {
       if (popupRef.current?.contains(event.target)) return;
       place();
     };
-    view.addEventListener("resize", place);
-    view.addEventListener("scroll", onScroll, true);
-    return () => {
-      view.removeEventListener("resize", place);
-      view.removeEventListener("scroll", onScroll, true);
-    };
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    view.addEventListener("resize", place, { signal });
+    view.addEventListener("scroll", onScroll, { capture: true, signal });
+    return () => listeners.abort();
   }, [open, field, place]);
   const [entered, setEntered] = useState(false);
   useEffect(() => {

package/dist/components/chat-composer/chat-composer.meta.js

@@ -223,8 +223,8 @@ var chatComposerMeta = {
   ],
   variants: { invalid: ["true", "false"] },
   tokensUsed: [
-    "card",
-    "input",
+    "field",
+    "field-border",
     "ring",
     "destructive",
     "foreground",

package/dist/components/chat-composer/chat-composer.variants.js

@@ -1,7 +1,7 @@
 // src/components/chat-composer/chat-composer.variants.ts
 import { cva } from "class-variance-authority";
 var chatComposerVariants = cva(
-  "flex w-full flex-col gap-2 border border-input bg-card p-2 motion-interactive focus-within:ring-2 focus-within:ring-ring [--chat-composer-r:var(--chat-composer-radius,var(--card-inner-radius,calc(min(var(--button-radius,9999px),var(--control-sm)/2)+(--spacing(2))+1px)))] rounded-[var(--chat-composer-r)]",
+  "flex w-full flex-col gap-2 border border-field-border bg-field p-2 motion-interactive focus-within:ring-2 focus-within:ring-ring [--chat-composer-r:var(--chat-composer-radius,var(--card-inner-radius,calc(min(var(--button-radius,9999px),var(--control-sm)/2)+(--spacing(2))+1px)))] rounded-[var(--chat-composer-r)]",
   {
     variants: {
       invalid: {

package/dist/components/color-field/color-field.js

@@ -27,15 +27,13 @@ function useAreaDrag(onChange) {
           );
         };
         emit(event.clientX, event.clientY);
+        const drag = new AbortController();
+        const { signal } = drag;
         const onMove = (e) => emit(e.clientX, e.clientY);
-        const onUp = () => {
-          window.removeEventListener("pointermove", onMove);
-          window.removeEventListener("pointerup", onUp);
-          window.removeEventListener("pointercancel", onUp);
-        };
-        window.addEventListener("pointermove", onMove);
-        window.addEventListener("pointerup", onUp);
-        window.addEventListener("pointercancel", onUp);
+        const onUp = () => drag.abort();
+        window.addEventListener("pointermove", onMove, { signal });
+        window.addEventListener("pointerup", onUp, { signal });
+        window.addEventListener("pointercancel", onUp, { signal });
       },
       [onChange]
     )