@sableui/react 0.11.0 → 0.12.0

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

@@ -34,7 +34,8 @@ var appHeaderMeta = {
     components: [
       "AppShell",
       "PageHeader",
-      "BottomNav"
+      "BottomNav",
+      "NavigationMenu"
     ]
   },
   props: [

package/dist/components/button/button.js

@@ -109,6 +109,9 @@ function Button({
       children: content,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
+      // Read by a ButtonGroup, which draws the seam between a bordered pair
+      // differently from a filled one.
+      "data-variant": variant ?? "primary",
       ...resolvedBleed ? { "data-bleed": resolvedBleed } : null,
       ...busy ? { "aria-busy": true } : null,
       // A busy native button stays focusable: aria-disabled, with presses

package/dist/components/button/button.meta.js

@@ -33,7 +33,7 @@ var buttonMeta = {
       },
       {
         guidance: "do",
-        description: "For a copy control, pair an icon Button with `useCopy(text, { timeout? })`. It takes the text when the hook is called and returns `{ copy, copied }`; `copy()` takes no argument, so pass the value the button copies to the hook, not to `copy`."
+        description: "For a copy control, pair an icon Button with `useCopy(text, { timeout? })`. It takes the text when the hook is called and returns `{ copy, copied }`; `copy()` takes no argument, so pass the value the button copies to the hook, not to `copy`. Text that costs something to produce (a file to fetch) goes in as a function, `useCopy(() => fetch(url).then((r) => r.text()))`, called only on click."
       },
       {
         guidance: "do",

package/dist/components/button/button.variants.js

@@ -2,7 +2,7 @@
 import { cva } from "class-variance-authority";
 var ON_COLOR_FOCUS = "focus-visible:ring-current focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-(--control-gap) whitespace-nowrap rounded-[var(--button-radius,9999px)] motion-interactive motion-press focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:shrink-0 [&_svg]:size-(--button-icon)",
+  "inline-flex items-center justify-center gap-(--control-gap) whitespace-nowrap rounded-s-[var(--button-radius-s,var(--button-radius,9999px))] rounded-e-[var(--button-radius-e,var(--button-radius,9999px))] motion-interactive motion-press focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:shrink-0 [&_svg]:size-(--button-icon)",
   {
     variants: {
       variant: {

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

@@ -0,0 +1,17 @@
+// src/components/button-group/button-group.tsx
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function ButtonGroup({ className, role = "group", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role,
+      "data-slot": "button-group",
+      className: cn("inline-flex items-stretch button-group-join", className),
+      ...props
+    }
+  );
+}
+export {
+  ButtonGroup
+};

package/dist/components/button-group/button-group.meta.js

@@ -0,0 +1,72 @@
+// src/components/button-group/button-group.meta.ts
+var buttonGroupMeta = {
+  name: "ButtonGroup",
+  summary: "Buttons joined into one control: a split button (an action beside the chevron that opens its menu) or a short run of related actions. The children stay ordinary Buttons; the group squares their inner corners, collapses bordered seams into one hairline, and draws a seam between filled ones.",
+  status: "stable",
+  keywords: ["split button", "button group", "segmented actions", "dropdown button", "joined buttons", "toolbar"],
+  usage: {
+    description: "Use ButtonGroup when one action has close alternatives (Copy page, with Open in\u2026 behind a chevron) or a few actions belong together as one object (zoom out, reset, zoom in). Use ToggleGroup for a choice that stays selected, and Tabs to switch views.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Give the children one height: `size="sm"` with `size="icon-sm"`, `md` with `icon`. The group aligns them but cannot reconcile two heights into one edge.'
+      },
+      {
+        guidance: "do",
+        description: 'For a split button, put the main action first and a Menu whose trigger is the chevron Button second, with an aria-label on the trigger ("More page actions").'
+      },
+      {
+        guidance: "do",
+        description: "Name the group with aria-label when the buttons alone do not say what they act on."
+      },
+      {
+        guidance: "dont",
+        description: "Do not round or border the children yourself to make them meet; that is the group's job, and an override breaks under a theme's button shape."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a selection that stays on. That is ToggleGroup, which carries the pressed state."
+      }
+    ]
+  },
+  related: {
+    components: ["Button", "Menu", "Toggle"]
+  },
+  props: [
+    {
+      name: "role",
+      type: "string",
+      default: '"group"',
+      description: "Group semantics, so a screen reader announces the buttons as one set. Pass `toolbar` when it carries arrow-key navigation of your own."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Layout classes for the group (margins, alignment). The children's look comes from their own variants."
+    },
+    {
+      name: "...props",
+      type: 'ComponentPropsWithRef<"div">',
+      description: "All native <div> attributes, including aria-label."
+    }
+  ],
+  tokensUsed: [],
+  a11y: [
+    'Renders role="group", so assistive tech announces the buttons as one set; name it with aria-label.',
+    "Each child keeps its own focus stop and label; a focused child is raised above its neighbour so its ring is drawn whole.",
+    'An icon-only chevron that opens a menu needs its own aria-label, such as "More page actions".'
+  ],
+  examples: [
+    {
+      label: "Split button with a menu",
+      code: '<ButtonGroup aria-label="Page actions"><Button variant="outline" size="sm" iconStart={<Icon name="copy" />} onClick={copy}>Copy page</Button><Menu><MenuTrigger render={<Button variant="outline" size="icon-sm" aria-label="More page actions" />}><Icon name="chevron-down" /></MenuTrigger><MenuContent align="end"><MenuItem icon={<Icon name="file" />} description="View this page as plain text">View as Markdown</MenuItem></MenuContent></Menu></ButtonGroup>'
+    },
+    {
+      label: "Related actions",
+      code: '<ButtonGroup aria-label="Zoom"><Button variant="secondary" size="icon-sm" aria-label="Zoom out"><Icon name="minus" /></Button><Button variant="secondary" size="sm">100%</Button><Button variant="secondary" size="icon-sm" aria-label="Zoom in"><Icon name="plus" /></Button></ButtonGroup>'
+    }
+  ]
+};
+export {
+  buttonGroupMeta
+};

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

@@ -0,0 +1,7 @@
+// src/components/button-group/index.ts
+import { ButtonGroup } from "./button-group.js";
+import { buttonGroupMeta } from "./button-group.meta.js";
+export {
+  ButtonGroup,
+  buttonGroupMeta
+};

package/dist/components/caret-menu/caret-menu.js

@@ -0,0 +1,221 @@
+"use client";
+
+// src/components/caret-menu/caret-menu.tsx
+import {
+  Children,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/cn.js";
+import { useAnchoredDensity, useTypeTier } from "../../lib/density.js";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { applyPortalThemeScope, resolvePortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { MENU_ITEM, useItemContent } from "../menu/menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EDGE = 8;
+var GAP = 4;
+var CaretMenuContext = createContext(null);
+function CaretMenu({ trigger, label, status, children, className }) {
+  const { field, match } = trigger;
+  const listId = useId();
+  const anchoredDensity = useAnchoredDensity();
+  const tier = useTypeTier();
+  const popupRef = useRef(null);
+  const listRef = useRef(null);
+  const [activeId, setActiveId] = useState(null);
+  const [count, setCount] = useState(0);
+  const triggerRef = useRef(trigger);
+  triggerRef.current = trigger;
+  const hasItems = Children.toArray(children).length > 0;
+  const open = match !== null && field !== null && (hasItems || status != null);
+  useIsomorphicLayoutEffect(() => {
+    const options = open ? optionsIn(listRef.current) : [];
+    setCount(options.length);
+    if (!options.some((o) => o.id === activeId)) setActiveId(options[0]?.id ?? null);
+  });
+  useEffect(() => {
+    if (!field) return;
+    const isInput = field instanceof HTMLInputElement;
+    if (isInput) field.setAttribute("role", "combobox");
+    field.setAttribute("aria-autocomplete", "list");
+    return () => {
+      if (isInput) {
+        field.removeAttribute("role");
+        field.removeAttribute("aria-expanded");
+      }
+      field.removeAttribute("aria-autocomplete");
+    };
+  }, [field]);
+  useEffect(() => {
+    if (!field) return;
+    if (field instanceof HTMLInputElement) field.setAttribute("aria-expanded", String(open));
+    if (!open) return;
+    field.setAttribute("aria-controls", listId);
+    if (activeId) field.setAttribute("aria-activedescendant", activeId);
+    else field.removeAttribute("aria-activedescendant");
+    return () => {
+      field.removeAttribute("aria-activedescendant");
+      field.removeAttribute("aria-controls");
+    };
+  }, [field, open, listId, activeId]);
+  const activeRef = useRef(activeId);
+  activeRef.current = activeId;
+  useEffect(() => {
+    if (!field || !open) return;
+    const onKeyDown = (event) => {
+      if (event.isComposing) return;
+      const options = optionsIn(listRef.current);
+      const index = options.findIndex((o) => o.id === activeRef.current);
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        if (!options.length) return;
+        event.preventDefault();
+        const step = event.key === "ArrowDown" ? 1 : -1;
+        const next = options[(index + step + options.length) % options.length];
+        setActiveId(next.id);
+        next.scrollIntoView?.({ block: "nearest" });
+      } else if ((event.key === "Enter" || event.key === "Tab") && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        if (index < 0) return;
+        event.preventDefault();
+        options[index].click();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        triggerRef.current.dismiss();
+      }
+    };
+    const target = field;
+    target.addEventListener("keydown", onKeyDown);
+    return () => target.removeEventListener("keydown", onKeyDown);
+  }, [field, open]);
+  const place = useCallback(() => {
+    const popup = popupRef.current;
+    const anchor = triggerRef.current.getAnchorRect();
+    if (!popup || !anchor) return;
+    const view = popup.ownerDocument.defaultView ?? window;
+    const natural = popup.scrollHeight;
+    const below = view.innerHeight - (anchor.bottom + GAP) - EDGE;
+    const above = anchor.top - GAP - EDGE;
+    const flip = natural > below && above > below;
+    const room = Math.max(0, flip ? above : below);
+    popup.style.maxHeight = `${room}px`;
+    const height = Math.min(natural, room);
+    popup.style.top = `${flip ? anchor.top - GAP - height : anchor.bottom + GAP}px`;
+    popup.style.setProperty("--transform-origin", flip ? "left bottom" : "left top");
+    const option = optionsIn(listRef.current)[0];
+    const inset = Number.parseFloat(view.getComputedStyle(popup).paddingLeft) + (option ? Number.parseFloat(view.getComputedStyle(option).paddingLeft) : 0);
+    const width = popup.offsetWidth;
+    const left = Math.min(anchor.left - inset, view.innerWidth - EDGE - width);
+    popup.style.left = `${Math.max(EDGE, left)}px`;
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (open) place();
+  });
+  useEffect(() => {
+    if (!open || !field) return;
+    const view = field.ownerDocument.defaultView ?? window;
+    const onScroll = (event) => {
+      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);
+    };
+  }, [open, field, place]);
+  const [entered, setEntered] = useState(false);
+  useEffect(() => {
+    if (!open) {
+      setEntered(false);
+      return;
+    }
+    const frame = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+  const setScope = useCallback(
+    (node) => {
+      if (node && field) applyPortalThemeScope(node, resolvePortalThemeScope(field));
+    },
+    [field]
+  );
+  const announcement = !open ? "" : status != null && typeof status !== "boolean" ? status : `${count} ${count === 1 ? "suggestion" : "suggestions"}`;
+  return /* @__PURE__ */ jsxs(CaretMenuContext.Provider, { value: { activeId, setActive: setActiveId }, children: [
+    /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement }),
+    open && field ? createPortal(
+      /* @__PURE__ */ jsx("div", { ref: setScope, "data-slot": "caret-menu-portal", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: popupRef,
+          ...anchoredDensity,
+          "data-slot": "caret-menu",
+          "data-starting-style": entered ? void 0 : "",
+          className: cn(
+            "fixed z-(--z-overlay) min-w-48 max-w-[min(24rem,calc(100vw-1rem))] rounded-md border border-border-floating bg-popover popup-inset text-popover-foreground shadow-md outline-none",
+            "overflow-y-auto overscroll-contain scrollbar-quiet motion-pop",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(HighlightGlide, {}),
+            /* @__PURE__ */ jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": label, children }),
+            status != null ? /* @__PURE__ */ jsx("div", { "data-slot": "caret-menu-status", className: cn("px-(--item-px) py-1.5 text-muted-foreground", tier.secondary), children: status }) : null
+          ]
+        }
+      ) }),
+      field.ownerDocument.body
+    ) : null
+  ] });
+}
+function optionsIn(list) {
+  if (!list) return [];
+  return [...list.querySelectorAll('[role="option"]:not([aria-disabled="true"])')];
+}
+function CaretMenuItem({
+  onSelect,
+  disabled = false,
+  icon,
+  description,
+  className,
+  children,
+  id,
+  ...props
+}) {
+  const context = useContext(CaretMenuContext);
+  const tier = useTypeTier();
+  const ownId = useId();
+  const optionId = id ?? ownId;
+  const active = context?.activeId === optionId;
+  const content = useItemContent(children, { icon, description });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      id: optionId,
+      role: "option",
+      "aria-selected": active,
+      "aria-disabled": disabled || void 0,
+      "data-highlighted": active ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      className: cn(MENU_ITEM, tier.body, className),
+      onMouseDown: (event) => event.preventDefault(),
+      onMouseMove: () => {
+        if (!disabled && !active) context?.setActive(optionId);
+      },
+      onClick: () => {
+        if (!disabled) onSelect();
+      },
+      children: content
+    }
+  );
+}
+export {
+  CaretMenu,
+  CaretMenuItem
+};

package/dist/components/caret-menu/caret-menu.meta.js

@@ -0,0 +1,119 @@
+// src/components/caret-menu/caret-menu.meta.ts
+var caretMenuMeta = {
+  name: "CaretMenu",
+  summary: "Suggestions at the caret of a text field, for @mentions and /slash commands. `useCaretTrigger` watches a Textarea, Input or ChatComposer (through `fieldRef`) for a trigger character and reports the query; CaretMenu draws the list beside the trigger and drives it from the field's keys, so focus never leaves the field. The value stays plain text: a mention is inserted as `@Sam Rivera`, a command runs and clears its `/query`.",
+  status: "beta",
+  keywords: [
+    "mention",
+    "mentions",
+    "at mention",
+    "slash command",
+    "slash commands",
+    "autocomplete",
+    "typeahead",
+    "suggestions",
+    "emoji picker",
+    "hashtag",
+    "trigger"
+  ],
+  usage: {
+    description: "Use CaretMenu with `useCaretTrigger` when typing a character in running text should offer choices: `@` for people, `/` for commands, `#` for channels, `:` for emoji. The app owns the items (filter or fetch them from `trigger.match.query`) and what choosing one does; Sable owns detecting the trigger, placing the list at the caret, the keys and the accessibility. Use Combobox when the whole field is a search for one value, and CommandMenu for a global palette.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Attach the hook's `fieldRef` to the field: `ref` on Textarea or Input, `fieldRef` on ChatComposer. On ChatComposer, Enter picks the highlighted suggestion instead of sending, because CaretMenu takes the Enter first."
+      },
+      {
+        guidance: "do",
+        description: 'Insert a mention with a trailing space, `trigger.replace(`@${person.name} `)`, so the reader keeps typing; run a slash command and then `trigger.replace("")` to clear `/query` from the field.'
+      },
+      {
+        guidance: "do",
+        description: "For `@` names with spaces set `allowSpaces: true` on that trigger; for `/` commands set `atStart: true` so `and/or` mid-sentence stays text."
+      },
+      {
+        guidance: "do",
+        description: 'Fetch remote suggestions from `trigger.match?.query` yourself, debounced, and pass `status` while loading or when nothing matches ("Searching\u2026", "No one matches"). The status row is also what the list announces.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not expect chips inside the field. A textarea holds text, so a mention is text. Rendering tokens in the field needs a rich-text editor, which Sable does not own (`sable docs extending-a-component`)."
+      },
+      {
+        guidance: "dont",
+        description: "Do not move focus into the list or wrap the field in a Popover. Focus stays in the field; the list is pointed at with aria-activedescendant."
+      }
+    ],
+    anatomy: [
+      { name: "useCaretTrigger", required: true, description: "The hook on the field: trigger detection, the query, the caret anchor, replace() and dismiss()." },
+      { name: "CaretMenu", required: true, description: "The list at the caret, its keys, and its announcements." },
+      { name: "CaretMenuItem", required: true, description: "One suggestion row, with optional icon and description." }
+    ]
+  },
+  related: {
+    components: ["ChatComposer", "Textarea", "Input", "Combobox", "CommandMenu", "Menu"]
+  },
+  props: [
+    {
+      name: "trigger",
+      type: "UseCaretTriggerResult",
+      description: "The result of `useCaretTrigger({ triggers })`, whose `fieldRef` is attached to the field. Each trigger is `{ char, atStart?, allowSpaces?, maxQueryLength? }`; the result carries `match` (`{ trigger, query, start, end }` or null), `replace(text)`, `dismiss()` and `getAnchorRect()`."
+    },
+    {
+      name: "label",
+      type: "string",
+      description: `The list's accessible name, e.g. "People" or "Commands".`
+    },
+    {
+      name: "status",
+      type: "ReactNode",
+      description: "A row under the items for what the list is doing: loading, nothing found, an error. Announced politely in place of the suggestion count. With no items and no status the list stays shut."
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "CaretMenuItems, already filtered for the query."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Layout classes for the popup, such as a width."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "CaretMenuItem",
+      type: "div props + onSelect: () => void + disabled?: boolean + icon?: ReactNode + description?: ReactNode",
+      description: "One suggestion, styled as a Menu row. `onSelect` runs on Enter, Tab or click; `icon` and `description` work as on MenuItem. A disabled row shows but the arrow keys skip it."
+    }
+  ],
+  tokensUsed: ["popover", "popover-foreground", "border-floating", "accent", "accent-foreground", "muted-foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-pop",
+      part: "root",
+      why: "Scales in from the caret's side, so the list reads as coming from the character just typed. It leaves instantly: it answers a keystroke and should be gone by the next one."
+    }
+  ],
+  a11y: [
+    'Focus stays in the field. The field carries aria-autocomplete="list", aria-controls (the listbox) and aria-activedescendant (the highlighted option), so a screen reader follows the arrow keys without focus moving.',
+    'An <input> becomes role="combobox" with aria-expanded. A <textarea> keeps its textbox role (combobox would drop multiline), and since a textbox cannot carry aria-expanded, opening is announced through a polite status, mounted from the start: "3 suggestions", or the `status` text.',
+    "\u2191/\u2193 move the highlight and wrap; Enter or Tab choose it; Escape closes the list without reaching an enclosing Dialog or Sheet. Shift+Enter is left alone, so a line break still breaks the line.",
+    "Rows keep focus in the field on pointer down, so a click does not blur it and close the list first.",
+    "Triggers follow a word boundary (`ana@example.com` and `and/or` stay text), wait for IME composition to end, and stay closed after Escape until the caret leaves that trigger."
+  ],
+  examples: [
+    {
+      label: "Mentions and slash commands in a ChatComposer",
+      code: 'const trigger = useCaretTrigger({ triggers: [{ char: "@", allowSpaces: true }, { char: "/", atStart: true }] })\nconst q = trigger.match?.query.toLowerCase() ?? ""\nconst commands = trigger.match?.trigger.char === "/"\n\n<ChatComposer fieldRef={trigger.fieldRef} onSend={send} />\n<CaretMenu trigger={trigger} label={commands ? "Commands" : "People"} status={!commands && people.length === 0 ? "No one matches" : undefined}>\n	{commands\n		? slashCommands.filter((c) => c.name.startsWith(q)).map((c) => (\n			<CaretMenuItem key={c.name} description={c.hint} onSelect={() => { c.run(); trigger.replace("") }}>/{c.name}</CaretMenuItem>\n		))\n		: people.filter((p) => p.name.toLowerCase().includes(q)).map((p) => (\n			<CaretMenuItem key={p.id} icon={<Avatar size="sm" src={p.avatar} fallback={p.initials} />} onSelect={() => trigger.replace(`@${p.name} `)}>{p.name}</CaretMenuItem>\n		))}\n</CaretMenu>'
+    },
+    {
+      label: "On a Textarea, with remote results",
+      code: 'const trigger = useCaretTrigger({ triggers: [{ char: "#" }] })\n// Fetch from trigger.match?.query yourself, debounced; pass the state as status.\n<Textarea ref={trigger.fieldRef} aria-label="Note" />\n<CaretMenu trigger={trigger} label="Channels" status={loading ? "Searching\u2026" : channels.length === 0 ? "No channels match" : undefined}>\n	{channels.map((c) => <CaretMenuItem key={c.id} onSelect={() => trigger.replace(`#${c.name} `)}>#{c.name}</CaretMenuItem>)}\n</CaretMenu>'
+    }
+  ]
+};
+export {
+  caretMenuMeta
+};

package/dist/components/caret-menu/index.js

@@ -0,0 +1,8 @@
+// src/components/caret-menu/index.ts
+import { CaretMenu, CaretMenuItem } from "./caret-menu.js";
+import { caretMenuMeta } from "./caret-menu.meta.js";
+export {
+  CaretMenu,
+  CaretMenuItem,
+  caretMenuMeta
+};

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

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/chat-composer/chat-composer.tsx
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState, useSyncExternalStore } from "react";
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { useTypeTier } from "../../lib/density.js";
@@ -15,6 +15,7 @@ function ChatComposer({
   defaultValue = "",
   onValueChange,
   onSend,
+  allowEmpty = false,
   placeholder = "Send a message\u2026",
   sendOn = "enter",
   busy = false,
@@ -53,7 +54,10 @@ function ChatComposer({
     },
     [isControlled, onValueChange]
   );
-  const canSend = text.trim().length > 0 && !busy && !disabled;
+  const coarse = useCoarsePointer();
+  const mode = coarse ? "mod-enter" : sendOn;
+  const footerContent = typeof footer === "function" ? footer({ sendOn: mode }) : footer;
+  const canSend = (allowEmpty || text.trim().length > 0) && !busy && !disabled;
   const send = useCallback(() => {
     if (!canSend) return;
     onSend?.(text.trim());
@@ -70,11 +74,12 @@ function ChatComposer({
     (event) => {
       if (event.key !== "Enter") return;
       if (event.nativeEvent.isComposing) return;
-      if (sendOn === "mod-enter" ? !(event.metaKey || event.ctrlKey) : event.shiftKey) return;
+      if (event.defaultPrevented) return;
+      if (mode === "mod-enter" ? !(event.metaKey || event.ctrlKey) : event.shiftKey) return;
       event.preventDefault();
       send();
     },
-    [send, sendOn]
+    [send, mode]
   );
   const showStop = busy && Boolean(onStop);
   return /* @__PURE__ */ jsxs(
@@ -104,7 +109,7 @@ function ChatComposer({
             autoResize: true,
             rows: 1,
             "aria-label": label,
-            "aria-keyshortcuts": sendOn === "mod-enter" ? "Meta+Enter Control+Enter" : "Enter",
+            "aria-keyshortcuts": mode === "mod-enter" ? "Meta+Enter Control+Enter" : "Enter",
             "aria-invalid": invalid || void 0,
             disabled,
             placeholder,
@@ -145,7 +150,10 @@ function ChatComposer({
               variant: "secondary",
               size: "icon-sm",
               "aria-label": stopLabel,
-              onClick: onStop,
+              onClick: () => {
+                onStop?.();
+                if (!coarse) field.current?.focus();
+              },
               children: /* @__PURE__ */ jsx(Icon, { name: "stop", variant: "solid", className: "text-[0.75em]" })
             }
           ) : (
@@ -164,13 +172,28 @@ function ChatComposer({
             )
           )
         ] }),
-        footer ? /* @__PURE__ */ jsx("p", { className: cn("px-[calc((var(--control-sm)-1.125rem)/2)] text-muted-foreground", tier.secondary), children: footer }) : null,
+        footerContent ? /* @__PURE__ */ jsx("p", { className: cn("px-[calc((var(--control-sm)-1.125rem)/2)] text-muted-foreground", tier.secondary), children: footerContent }) : null,
         children
       ]
     }
   );
 }
 ChatComposer.displayName = "ChatComposer";
+var COARSE = "(pointer: coarse)";
+function subscribeCoarse(onChange) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {
+  };
+  const query = window.matchMedia(COARSE);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+function useCoarsePointer() {
+  return useSyncExternalStore(
+    subscribeCoarse,
+    () => typeof window !== "undefined" && Boolean(window.matchMedia?.(COARSE).matches),
+    () => false
+  );
+}
 export {
   ChatComposer
 };