@burtson-labs/ui 0.14.0 → 0.14.1

package/dist/components/command.js

@@ -1,18 +1,19 @@
 "use client";
-import { cn } from "../lib/utils.js";
-import { Command as pkg } from "../primitives/vendor/cmdk/index.js";
+import { cn, noOutlineClasses } from "../lib/utils.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
-import "react";
+import { Command as pkg } from "../primitives/vendor/cmdk/index.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Search from "@burtson-labs/icons/react/search";
 //#region src/components/command.tsx
-function Command({ className, ...props }) {
+var Command = React.forwardRef(function Command({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(pkg, {
+		ref,
 		"data-slot": "command",
 		className: cn("flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-raised text-popover-foreground has-[[cmdk-input]:focus-visible]:border-ring", className),
 		...props
 	});
-}
+});
 /** A command palette in a dialog, the usual ⌘K surface. */
 function CommandDialog({ title = "Command palette", description = "Search for a page or an action", children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog, {
@@ -30,62 +31,74 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 		})
 	});
 }
-function CommandInput({ className, ...props }) {
+/**
+* The row is the field (icon + input, ruled off from the list); the input
+* itself draws no border or outline, whatever the host page's CSS says.
+*/
+var CommandInput = React.forwardRef(function CommandInput({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "command-input-wrapper",
-		className: "flex h-11 items-center gap-2 border-b px-3",
+		className: "flex items-center gap-2 border-b px-3",
 		children: [/* @__PURE__ */ jsx(Search, {
-			className: "size-4 shrink-0 opacity-50",
+			className: "size-4 shrink-0 text-muted-foreground",
 			"aria-hidden": true
 		}), /* @__PURE__ */ jsx(pkg.Input, {
+			ref,
 			"data-slot": "command-input",
-			className: cn("flex h-10 w-full rounded-none border-0 bg-transparent py-3 text-sm shadow-none outline-hidden! placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
+			className: cn("flex h-11 w-full rounded-none border-0 bg-transparent py-3 text-base shadow-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm", noOutlineClasses, className),
 			...props
 		})]
 	});
-}
-function CommandList({ className, ...props }) {
+});
+var CommandList = React.forwardRef(function CommandList({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(pkg.List, {
+		ref,
 		"data-slot": "command-list",
 		className: cn("max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1", className),
 		...props
 	});
-}
-function CommandEmpty(props) {
+});
+var CommandEmpty = React.forwardRef(function CommandEmpty({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(pkg.Empty, {
+		ref,
 		"data-slot": "command-empty",
-		className: "py-6 text-center text-sm text-muted-foreground",
+		className: cn("py-6 text-center text-sm text-muted-foreground", className),
 		...props
 	});
-}
-function CommandGroup({ className, ...props }) {
+});
+var CommandGroup = React.forwardRef(function CommandGroup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(pkg.Group, {
+		ref,
 		"data-slot": "command-group",
-		className: cn("overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
+		className: cn("overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:tracking-[0.06em] [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase", className),
 		...props
 	});
-}
-function CommandSeparator({ className, ...props }) {
+});
+var CommandSeparator = React.forwardRef(function CommandSeparator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(pkg.Separator, {
+		ref,
 		"data-slot": "command-separator",
 		className: cn("-mx-1 h-px bg-border", className),
 		...props
 	});
-}
-function CommandItem({ className, ...props }) {
+});
+/** A row: 32px (44px on touch screens), 8px radius, a fill when active. */
+var CommandItem = React.forwardRef(function CommandItem({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(pkg.Item, {
+		ref,
 		"data-slot": "command-item",
-		className: cn("relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden! select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: cn("relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary data-[selected=true]:text-foreground pointer-coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", noOutlineClasses, className),
 		...props
 	});
-}
-function CommandShortcut({ className, ...props }) {
+});
+var CommandShortcut = React.forwardRef(function CommandShortcut({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "command-shortcut",
 		className: cn("ml-auto rounded-xs border border-border bg-surface-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
 

package/dist/components/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","names":["CommandPrimitive"],"sources":["../../src/components/command.tsx"],"sourcesContent":["import Search from '@burtson-labs/icons/react/search';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport { Command as CommandPrimitive } from '../primitives/vendor/cmdk';\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        // Standalone with a border, the box is the field: its border takes the\n        // ring colour while the search input has keyboard focus. In a popover or\n        // dialog there is no border of its own, so the rule draws nothing.\n        'flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-raised text-popover-foreground has-[[cmdk-input]:focus-visible]:border-ring',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A command palette in a dialog, the usual ⌘K surface. */\nfunction CommandDialog({\n  title = 'Command palette',\n  description = 'Search for a page or an action',\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string;\n  description?: string;\n  className?: string;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        className={cn(\n          'top-[20%] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl sm:p-0',\n          className,\n        )}\n        showCloseButton={false}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    // The row is the field (icon + input, ruled off from the list); the input\n    // itself draws no border or outline, whatever the host page's CSS says.\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-11 items-center gap-2 border-b px-3\">\n      <Search className=\"size-4 shrink-0 opacity-50\" aria-hidden />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          'flex h-10 w-full rounded-none border-0 bg-transparent py-3 text-sm shadow-none outline-hidden! placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn('max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty(props: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm text-muted-foreground\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn('-mx-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden! select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        'ml-auto rounded-xs border border-border bg-surface-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACA,KAAD;EACE,aAAU;EACV,WAAW,GAIT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,GAAG,SAKF;CACD,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GACE,WAAW,GACT,wEACA,SACF;GACA,iBAAiB;GALnB,UAAA,CAOE,qBAAC,cAAD;IAAc,WAAU;IAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;GACd,CAAA,GAAA,oBAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA,CACI;;CACT,CAAA;AAEZ;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OAGE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAAjD,UAAA,CACE,oBAAC,QAAD;GAAQ,WAAU;GAA6B,eAAA;EAAa,CAAA,GAC5D,oBAACA,IAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,oLACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,IAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,OAA4D;CAChF,OACE,oBAACA,IAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,IAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,2NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,IAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,IAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,yYACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,yHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"command.js","names":["CommandPrimitive"],"sources":["../../src/components/command.tsx"],"sourcesContent":["import Search from '@burtson-labs/icons/react/search';\nimport * as React from 'react';\n\nimport { cn, noOutlineClasses } from '../lib/utils';\nimport { Command as CommandPrimitive } from '../primitives/vendor/cmdk';\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';\n\nconst Command = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof CommandPrimitive>>(\n  function Command({ className, ...props }, ref) {\n    return (\n      <CommandPrimitive\n        ref={ref}\n        data-slot=\"command\"\n        className={cn(\n          // Standalone with a border, the box is the field: its border takes the\n          // ring colour while the search input has keyboard focus. In a popover or\n          // dialog there is no border of its own, so the rule draws nothing.\n          'flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-raised text-popover-foreground has-[[cmdk-input]:focus-visible]:border-ring',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface CommandDialogProps extends React.ComponentProps<typeof Dialog> {\n  title?: string;\n  description?: string;\n  className?: string;\n}\n\n/** A command palette in a dialog, the usual ⌘K surface. */\nfunction CommandDialog({\n  title = 'Command palette',\n  description = 'Search for a page or an action',\n  children,\n  className,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        className={cn(\n          'top-[20%] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl sm:p-0',\n          className,\n        )}\n        showCloseButton={false}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/**\n * The row is the field (icon + input, ruled off from the list); the input\n * itself draws no border or outline, whatever the host page's CSS says.\n */\nconst CommandInput = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentProps<typeof CommandPrimitive.Input>\n>(function CommandInput({ className, ...props }, ref) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex items-center gap-2 border-b px-3\">\n      <Search className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden />\n      <CommandPrimitive.Input\n        ref={ref}\n        data-slot=\"command-input\"\n        className={cn(\n          'flex h-11 w-full rounded-none border-0 bg-transparent py-3 text-base shadow-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm',\n          noOutlineClasses,\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\n\nconst CommandList = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.List>\n>(function CommandList({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      data-slot=\"command-list\"\n      className={cn('max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1', className)}\n      {...props}\n    />\n  );\n});\n\nconst CommandEmpty = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Empty>\n>(function CommandEmpty({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      data-slot=\"command-empty\"\n      className={cn('py-6 text-center text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\n\nconst CommandGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Group>\n>(function CommandGroup({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden py-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:tracking-[0.06em] [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst CommandSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Separator>\n>(function CommandSeparator({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      data-slot=\"command-separator\"\n      className={cn('-mx-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\n\n/** A row: 32px (44px on touch screens), 8px radius, a fill when active. */\nconst CommandItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof CommandPrimitive.Item>\n>(function CommandItem({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-secondary data-[selected=true]:text-foreground pointer-coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        noOutlineClasses,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst CommandShortcut = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function CommandShortcut({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"command-shortcut\"\n        className={cn(\n          'ml-auto rounded-xs border border-border bg-surface-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"mappings":";;;;;;;;AAQA,IAAM,UAAU,MAAM,WACpB,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAS,KAAK;CAC7C,OACE,oBAACA,KAAD;EACO;EACL,aAAU;EACV,WAAW,GAIT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;;AASA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,GAAG,SACkB;CACrB,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GACE,WAAW,GACT,wEACA,SACF;GACA,iBAAiB;GALnB,UAAA,CAOE,qBAAC,cAAD;IAAc,WAAU;IAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;GACd,CAAA,GAAA,oBAAC,SAAD;IAAS,WAAU;IAChB;GACM,CAAA,CACI;;CACT,CAAA;AAEZ;;;;;AAMA,IAAM,eAAe,MAAM,WAGzB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAAjD,UAAA,CACE,oBAAC,QAAD;GAAQ,WAAU;GAAwC,eAAA;EAAa,CAAA,GACvE,oBAACA,IAAiB,OAAlB;GACO;GACL,aAAU;GACV,WAAW,GACT,iLACA,kBACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET,CAAC;AAED,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACA,IAAiB,MAAlB;EACO;EACL,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,eAAe,MAAM,WAGzB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,IAAiB,OAAlB;EACO;EACL,aAAU;EACV,WAAW,GAAG,kDAAkD,SAAS;EACzE,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,eAAe,MAAM,WAGzB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAACA,IAAiB,OAAlB;EACO;EACL,aAAU;EACV,WAAW,GACT,+SACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,mBAAmB,MAAM,WAG7B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAACA,IAAiB,WAAlB;EACO;EACL,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL,CAAC;;AAGD,IAAM,cAAc,MAAM,WAGxB,SAAS,YAAY,EAAE,WAAW,GAAG,SAAS,KAAK;CACnD,OACE,oBAACA,IAAiB,MAAlB;EACO;EACL,aAAU;EACV,WAAW,GACT,iZACA,kBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,kBAAkB,MAAM,WAC5B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,QAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,yHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/composer.d.ts

@@ -47,11 +47,11 @@ export declare function acceptsFile(file: Pick<File, 'name' | 'type'>, accept?:
  * The message box: grows with its text, Enter sends, Shift+Enter adds a
  * line, and it never sends mid-composition (IME input).
  */
-declare function Composer({ onSubmit, onSubmitError, submitErrorText, value: controlled, onValueChange, streaming, onStop, disabled, placeholder, attachments, attachmentCount, canSubmit, actions, label, onAttach, accept, multiple, attachLabel, className, ...props }: ComposerProps): React.JSX.Element;
+declare const Composer: React.ForwardRefExoticComponent<Omit<ComposerProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
 export interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {
     items: string[];
     onSelect: (item: string) => void;
 }
 /** Starter prompts as chips. */
-declare function Suggestions({ items, onSelect, className, ...props }: SuggestionsProps): React.JSX.Element;
+declare const Suggestions: React.ForwardRefExoticComponent<Omit<SuggestionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Composer, Suggestions };

package/dist/components/composer.js

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses, noOutlineClasses } from "../lib/utils.js";
 import { Button } from "./button.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ function acceptsFile(file, accept) {
 * The message box: grows with its text, Enter sends, Shift+Enter adds a
 * line, and it never sends mid-composition (IME input).
 */
-function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could not be sent. Your draft is saved here. Try again.", value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, attachmentCount = 0, canSubmit = true, actions, label = "Message", onAttach, accept, multiple = true, attachLabel = "Attach files", className, ...props }) {
+var Composer = React.forwardRef(function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could not be sent. Your draft is saved here. Try again.", value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, attachmentCount = 0, canSubmit = true, actions, label = "Message", onAttach, accept, multiple = true, attachLabel = "Attach files", className, ...props }, ref) {
 	const fileInput = React.useRef(null);
 	const [dragging, setDragging] = React.useState(false);
 	const dragDepth = React.useRef(0);
@@ -69,6 +69,7 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 		}
 	};
 	return /* @__PURE__ */ jsxs("form", {
+		ref,
 		"data-slot": "composer",
 		"data-dragging": dragging || void 0,
 		onSubmit: (e) => {
@@ -129,7 +130,7 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 						send();
 					}
 				},
-				className: "field-sizing-content max-h-48 min-h-9 w-full resize-none rounded-none border-0 bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 shadow-none outline-hidden! placeholder:text-muted-foreground disabled:cursor-not-allowed"
+				className: cn("field-sizing-content max-h-48 min-h-9 w-full resize-none rounded-none border-0 bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 shadow-none placeholder:text-muted-foreground disabled:cursor-not-allowed pointer-coarse:min-h-11 pointer-coarse:py-2.5", noOutlineClasses)
 			}),
 			failed && /* @__PURE__ */ jsx("p", {
 				id: errorId,
@@ -193,10 +194,11 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 			})
 		]
 	});
-}
+});
 /** Starter prompts as chips. */
-function Suggestions({ items, onSelect, className, ...props }) {
+var Suggestions = React.forwardRef(function Suggestions({ items, onSelect, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "suggestions",
 		role: "group",
 		"aria-label": "Suggestions",
@@ -205,11 +207,11 @@ function Suggestions({ items, onSelect, className, ...props }) {
 		children: items.map((item) => /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => onSelect(item),
-			className: "animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20",
+			className: cn("animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground pointer-coarse:min-h-11", focusRingClasses),
 			children: item
 		}, item))
 	});
-}
+});
 //#endregion
 export { Composer, Suggestions, acceptsFile };
 

package/dist/components/composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"composer.js","names":["_Fragment"],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Paperclip from '@burtson-labs/icons/react/paperclip';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /**\n   * Clears after success. Reject a returned promise to retain the draft. The\n   * text can be empty when `attachmentCount` allows an attachment-only send.\n   */\n  onSubmit: (text: string) => void | Promise<void>;\n  onSubmitError?: (error: unknown) => void;\n  submitErrorText?: string;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Attachments ready to send. Above zero, an empty message can be sent. */\n  attachmentCount?: number;\n  /**\n   * Extra gate on sending, e.g. false while an attachment is still parsing.\n   * Unlike `disabled`, the person can keep typing.\n   */\n  canSubmit?: boolean;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n  /**\n   * Files the person picked, dropped on the composer or pasted. Setting it\n   * shows a paperclip button. The composer only hands the files over: the\n   * app uploads them and renders their state in `attachments` (an\n   * AttachmentTray), with `attachmentCount` and `canSubmit` for sending.\n   */\n  onAttach?: (files: File[]) => void;\n  /** File input `accept`, e.g. \"image/*,.pdf\". Dropped and pasted files are filtered too. */\n  accept?: string;\n  /** Allow several files at once. Default true. */\n  multiple?: boolean;\n  /** Accessible name of the attach button. */\n  attachLabel?: string;\n}\n\n/** Does `file` match an `accept` list (\"image/*,.pdf,text/plain\")? Empty accepts all. */\nexport function acceptsFile(file: Pick<File, 'name' | 'type'>, accept?: string): boolean {\n  if (!accept?.trim()) return true;\n  const name = file.name.toLowerCase();\n  const type = (file.type || '').toLowerCase();\n  return accept\n    .split(',')\n    .map((a) => a.trim().toLowerCase())\n    .filter(Boolean)\n    .some((rule) =>\n      rule.startsWith('.')\n        ? name.endsWith(rule)\n        : rule.endsWith('/*')\n          ? type.startsWith(rule.slice(0, -1))\n          : type === rule,\n    );\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nfunction Composer({\n  onSubmit,\n  onSubmitError,\n  submitErrorText = 'Message could not be sent. Your draft is saved here. Try again.',\n  value: controlled,\n  onValueChange,\n  streaming = false,\n  onStop,\n  disabled = false,\n  placeholder = 'Ask anything…',\n  attachments,\n  attachmentCount = 0,\n  canSubmit = true,\n  actions,\n  label = 'Message',\n  onAttach,\n  accept,\n  multiple = true,\n  attachLabel = 'Attach files',\n  className,\n  ...props\n}: ComposerProps) {\n  const fileInput = React.useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const dragDepth = React.useRef(0);\n  const attach = (list: FileList | File[] | null | undefined) => {\n    if (!onAttach || !list) return;\n    let files = Array.from(list).filter((f) => acceptsFile(f, accept));\n    if (!multiple) files = files.slice(0, 1);\n    if (files.length) onAttach(files);\n  };\n  const hasFiles = (e: React.DragEvent) =>\n    Array.from(e.dataTransfer?.types ?? []).includes('Files');\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const sending = React.useRef(false);\n  const latest = React.useRef(value);\n  const mounted = React.useRef(true);\n  const errorId = React.useId();\n  React.useEffect(() => {\n    latest.current = value;\n  }, [value]);\n  React.useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend =\n    canSubmit &&\n    !disabled &&\n    !streaming &&\n    !pending &&\n    (value.trim().length > 0 || attachmentCount > 0);\n  const send = async () => {\n    if (!canSend || sending.current) return;\n    const draft = value;\n    sending.current = true;\n    setFailed(false);\n    setPending(true);\n    try {\n      await onSubmit(draft.trim());\n      if (mounted.current && latest.current === draft) setValue('');\n    } catch (error) {\n      if (mounted.current) setFailed(true);\n      onSubmitError?.(error);\n    } finally {\n      sending.current = false;\n      if (mounted.current) setPending(false);\n    }\n  };\n\n  return (\n    <form\n      data-slot=\"composer\"\n      data-dragging={dragging || undefined}\n      onSubmit={(e) => {\n        e.preventDefault();\n        void send();\n      }}\n      onDragEnter={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        dragDepth.current += 1;\n        setDragging(true);\n      }}\n      onDragOver={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        e.dataTransfer.dropEffect = 'copy';\n      }}\n      onDragLeave={() => {\n        if (!onAttach) return;\n        dragDepth.current = Math.max(0, dragDepth.current - 1);\n        if (dragDepth.current === 0) setDragging(false);\n      }}\n      onDrop={(e) => {\n        if (!onAttach || disabled) return;\n        e.preventDefault();\n        dragDepth.current = 0;\n        setDragging(false);\n        attach(e.dataTransfer?.files);\n      }}\n      className={cn(\n        // The box is the field: same focus as Input (ring border + 1px inset ring).\n        'relative grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:inset-ring-1 has-[textarea:focus-visible]:inset-ring-ring dark:bg-surface-raised',\n        'data-[dragging]:border-brand data-[dragging]:inset-ring-1 data-[dragging]:inset-ring-brand',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      {dragging && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-1 z-10 grid place-items-center rounded-md border border-dashed border-brand/50 bg-brand-soft/80 text-sm font-medium text-brand-soft-foreground\"\n        >\n          Drop files to attach\n        </div>\n      )}\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled || pending}\n        aria-describedby={failed ? errorId : undefined}\n        aria-invalid={failed || undefined}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onPaste={(e) => {\n          if (!onAttach) return;\n          const files = Array.from(e.clipboardData?.files ?? []);\n          // Only take over the paste when it carries files; text pastes as text.\n          if (files.length) {\n            e.preventDefault();\n            attach(files);\n          }\n        }}\n        onKeyDown={(e) => {\n          if (\n            e.key === 'Enter' &&\n            !e.shiftKey &&\n            !e.nativeEvent.isComposing &&\n            e.nativeEvent.keyCode !== 229\n          ) {\n            e.preventDefault();\n            void send();\n          }\n        }}\n        className=\"field-sizing-content max-h-48 min-h-9 w-full resize-none rounded-none border-0 bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 shadow-none outline-hidden! placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      />\n      {failed && (\n        <p id={errorId} role=\"alert\" className=\"px-2 text-sm text-destructive\">\n          {submitErrorText}\n        </p>\n      )}\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {onAttach && (\n          <>\n            <input\n              ref={fileInput}\n              type=\"file\"\n              hidden\n              tabIndex={-1}\n              accept={accept}\n              multiple={multiple}\n              data-slot=\"composer-file-input\"\n              onChange={(e) => {\n                attach(e.target.files);\n                // Let the same file be picked again after a removal.\n                e.target.value = '';\n              }}\n            />\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"ghost\"\n              aria-label={attachLabel}\n              title={attachLabel}\n              disabled={disabled}\n              onClick={() => fileInput.current?.click()}\n              className=\"pointer-coarse:size-11\"\n            >\n              <Paperclip />\n            </Button>\n          </>\n        )}\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              className=\"pointer-coarse:size-11\"\n              onClick={onStop}\n              disabled={!onStop || disabled}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"submit\"\n              size=\"icon-sm\"\n              aria-label=\"Send\"\n              className=\"pointer-coarse:size-11\"\n              loading={pending}\n              disabled={!canSend}\n            >\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n}\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nfunction Suggestions({ items, onSelect, className, ...props }: SuggestionsProps) {\n  return (\n    <div\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className=\"animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport { Composer, Suggestions };\n"],"mappings":"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"}
+{"version":3,"file":"composer.js","names":["_Fragment"],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Paperclip from '@burtson-labs/icons/react/paperclip';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, noOutlineClasses } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /**\n   * Clears after success. Reject a returned promise to retain the draft. The\n   * text can be empty when `attachmentCount` allows an attachment-only send.\n   */\n  onSubmit: (text: string) => void | Promise<void>;\n  onSubmitError?: (error: unknown) => void;\n  submitErrorText?: string;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Attachments ready to send. Above zero, an empty message can be sent. */\n  attachmentCount?: number;\n  /**\n   * Extra gate on sending, e.g. false while an attachment is still parsing.\n   * Unlike `disabled`, the person can keep typing.\n   */\n  canSubmit?: boolean;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n  /**\n   * Files the person picked, dropped on the composer or pasted. Setting it\n   * shows a paperclip button. The composer only hands the files over: the\n   * app uploads them and renders their state in `attachments` (an\n   * AttachmentTray), with `attachmentCount` and `canSubmit` for sending.\n   */\n  onAttach?: (files: File[]) => void;\n  /** File input `accept`, e.g. \"image/*,.pdf\". Dropped and pasted files are filtered too. */\n  accept?: string;\n  /** Allow several files at once. Default true. */\n  multiple?: boolean;\n  /** Accessible name of the attach button. */\n  attachLabel?: string;\n}\n\n/** Does `file` match an `accept` list (\"image/*,.pdf,text/plain\")? Empty accepts all. */\nexport function acceptsFile(file: Pick<File, 'name' | 'type'>, accept?: string): boolean {\n  if (!accept?.trim()) return true;\n  const name = file.name.toLowerCase();\n  const type = (file.type || '').toLowerCase();\n  return accept\n    .split(',')\n    .map((a) => a.trim().toLowerCase())\n    .filter(Boolean)\n    .some((rule) =>\n      rule.startsWith('.')\n        ? name.endsWith(rule)\n        : rule.endsWith('/*')\n          ? type.startsWith(rule.slice(0, -1))\n          : type === rule,\n    );\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nconst Composer = React.forwardRef<HTMLFormElement, ComposerProps>(function Composer(\n  {\n    onSubmit,\n    onSubmitError,\n    submitErrorText = 'Message could not be sent. Your draft is saved here. Try again.',\n    value: controlled,\n    onValueChange,\n    streaming = false,\n    onStop,\n    disabled = false,\n    placeholder = 'Ask anything…',\n    attachments,\n    attachmentCount = 0,\n    canSubmit = true,\n    actions,\n    label = 'Message',\n    onAttach,\n    accept,\n    multiple = true,\n    attachLabel = 'Attach files',\n    className,\n    ...props\n  },\n  ref,\n) {\n  const fileInput = React.useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const dragDepth = React.useRef(0);\n  const attach = (list: FileList | File[] | null | undefined) => {\n    if (!onAttach || !list) return;\n    let files = Array.from(list).filter((f) => acceptsFile(f, accept));\n    if (!multiple) files = files.slice(0, 1);\n    if (files.length) onAttach(files);\n  };\n  const hasFiles = (e: React.DragEvent) =>\n    Array.from(e.dataTransfer?.types ?? []).includes('Files');\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const sending = React.useRef(false);\n  const latest = React.useRef(value);\n  const mounted = React.useRef(true);\n  const errorId = React.useId();\n  React.useEffect(() => {\n    latest.current = value;\n  }, [value]);\n  React.useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend =\n    canSubmit &&\n    !disabled &&\n    !streaming &&\n    !pending &&\n    (value.trim().length > 0 || attachmentCount > 0);\n  const send = async () => {\n    if (!canSend || sending.current) return;\n    const draft = value;\n    sending.current = true;\n    setFailed(false);\n    setPending(true);\n    try {\n      await onSubmit(draft.trim());\n      if (mounted.current && latest.current === draft) setValue('');\n    } catch (error) {\n      if (mounted.current) setFailed(true);\n      onSubmitError?.(error);\n    } finally {\n      sending.current = false;\n      if (mounted.current) setPending(false);\n    }\n  };\n\n  return (\n    <form\n      ref={ref}\n      data-slot=\"composer\"\n      data-dragging={dragging || undefined}\n      onSubmit={(e) => {\n        e.preventDefault();\n        void send();\n      }}\n      onDragEnter={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        dragDepth.current += 1;\n        setDragging(true);\n      }}\n      onDragOver={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        e.dataTransfer.dropEffect = 'copy';\n      }}\n      onDragLeave={() => {\n        if (!onAttach) return;\n        dragDepth.current = Math.max(0, dragDepth.current - 1);\n        if (dragDepth.current === 0) setDragging(false);\n      }}\n      onDrop={(e) => {\n        if (!onAttach || disabled) return;\n        e.preventDefault();\n        dragDepth.current = 0;\n        setDragging(false);\n        attach(e.dataTransfer?.files);\n      }}\n      className={cn(\n        // The box is the field: same focus as Input (ring border + 1px inset ring).\n        'relative grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:inset-ring-1 has-[textarea:focus-visible]:inset-ring-ring dark:bg-surface-raised',\n        'data-[dragging]:border-brand data-[dragging]:inset-ring-1 data-[dragging]:inset-ring-brand',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      {dragging && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-1 z-10 grid place-items-center rounded-md border border-dashed border-brand/50 bg-brand-soft/80 text-sm font-medium text-brand-soft-foreground\"\n        >\n          Drop files to attach\n        </div>\n      )}\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled || pending}\n        aria-describedby={failed ? errorId : undefined}\n        aria-invalid={failed || undefined}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onPaste={(e) => {\n          if (!onAttach) return;\n          const files = Array.from(e.clipboardData?.files ?? []);\n          // Only take over the paste when it carries files; text pastes as text.\n          if (files.length) {\n            e.preventDefault();\n            attach(files);\n          }\n        }}\n        onKeyDown={(e) => {\n          if (\n            e.key === 'Enter' &&\n            !e.shiftKey &&\n            !e.nativeEvent.isComposing &&\n            e.nativeEvent.keyCode !== 229\n          ) {\n            e.preventDefault();\n            void send();\n          }\n        }}\n        className={cn(\n          'field-sizing-content max-h-48 min-h-9 w-full resize-none rounded-none border-0 bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 shadow-none placeholder:text-muted-foreground disabled:cursor-not-allowed pointer-coarse:min-h-11 pointer-coarse:py-2.5',\n          noOutlineClasses,\n        )}\n      />\n      {failed && (\n        <p id={errorId} role=\"alert\" className=\"px-2 text-sm text-destructive\">\n          {submitErrorText}\n        </p>\n      )}\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {onAttach && (\n          <>\n            <input\n              ref={fileInput}\n              type=\"file\"\n              hidden\n              tabIndex={-1}\n              accept={accept}\n              multiple={multiple}\n              data-slot=\"composer-file-input\"\n              onChange={(e) => {\n                attach(e.target.files);\n                // Let the same file be picked again after a removal.\n                e.target.value = '';\n              }}\n            />\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"ghost\"\n              aria-label={attachLabel}\n              title={attachLabel}\n              disabled={disabled}\n              onClick={() => fileInput.current?.click()}\n              className=\"pointer-coarse:size-11\"\n            >\n              <Paperclip />\n            </Button>\n          </>\n        )}\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              className=\"pointer-coarse:size-11\"\n              onClick={onStop}\n              disabled={!onStop || disabled}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"submit\"\n              size=\"icon-sm\"\n              aria-label=\"Send\"\n              className=\"pointer-coarse:size-11\"\n              loading={pending}\n              disabled={!canSend}\n            >\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n});\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nconst Suggestions = React.forwardRef<HTMLDivElement, SuggestionsProps>(function Suggestions(\n  { items, onSelect, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className={cn(\n            'animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground pointer-coarse:min-h-11',\n            focusRingClasses,\n          )}\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n});\n\nexport { Composer, Suggestions };\n"],"mappings":"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"}

package/dist/components/connection-status.d.ts

@@ -15,7 +15,7 @@ export interface ConnectionStatusProps extends Omit<React.ComponentProps<'div'>,
     onRetry?: () => void;
 }
 /** A dot and a word for a live connection: model provider, gateway, socket. */
-declare function ConnectionStatus({ state, label, detail, onRetry, ...props }: ConnectionStatusProps): React.JSX.Element;
+declare const ConnectionStatus: React.ForwardRefExoticComponent<Omit<ConnectionStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     state: SyncState;
     /** When the last successful sync finished. */
@@ -29,7 +29,7 @@ export interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'chil
     formatTime?: (date: Date) => string;
 }
 /** Whether local changes have reached the server. */
-declare function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTime, ...props }: SyncStatusProps): React.JSX.Element;
+declare const SyncStatus: React.ForwardRefExoticComponent<Omit<SyncStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {
     state: ConnectionState;
     /** What still works, e.g. "Messages you send will go out when you reconnect." */
@@ -40,5 +40,5 @@ export interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>,
  * A full-width notice for connection trouble. It renders nothing while
  * connected, connecting or unknown, so it can stay mounted.
  */
-declare function ConnectionBanner({ state, description, onRetry, className, ...props }: ConnectionBannerProps): React.JSX.Element | null;
+declare const ConnectionBanner: React.ForwardRefExoticComponent<Omit<ConnectionBannerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ConnectionBanner, ConnectionStatus, SyncStatus };

package/dist/components/connection-status.js

@@ -1,10 +1,10 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses } from "../lib/utils.js";
 import { Alert, AlertDescription, AlertTitle } from "./alert.js";
 import { Button } from "./button.js";
 import { Status } from "./status.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import CloudOff from "@burtson-labs/icons/react/cloud-off";
 import WifiOff from "@burtson-labs/icons/react/wifi-off";
@@ -30,7 +30,7 @@ var connection = {
 	},
 	error: {
 		text: "Connection failed",
-		tone: "danger"
+		tone: "destructive"
 	},
 	unknown: {
 		text: "Status unknown",
@@ -57,7 +57,7 @@ var sync = {
 	},
 	error: {
 		text: "Sync failed",
-		tone: "danger"
+		tone: "destructive"
 	},
 	unknown: {
 		text: "Sync status unknown",
@@ -71,8 +71,9 @@ function WithDetail({ detail, children }) {
 		children
 	}), /* @__PURE__ */ jsx(TooltipContent, { children: detail })] });
 }
-function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className, ...props }) {
+var StatusLine = React.forwardRef(function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": slot,
 		"data-state": state,
 		role: "status",
@@ -84,7 +85,7 @@ function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className
 				status: tone,
 				pulse,
 				tabIndex: detail ? 0 : void 0,
-				className: "rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+				className: cn("rounded-sm", focusRingClasses, detail && "relative pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:top-1/2 pointer-coarse:before:h-11 pointer-coarse:before:-translate-y-1/2 pointer-coarse:before:content-['']"),
 				children: [text, detail && typeof detail === "string" && /* @__PURE__ */ jsxs("span", {
 					className: "sr-only",
 					children: [". ", detail]
@@ -99,11 +100,12 @@ function StatusLine({ slot, state, text, tone, pulse, detail, onRetry, className
 			children: "Retry"
 		})]
 	});
-}
+});
 /** A dot and a word for a live connection: model provider, gateway, socket. */
-function ConnectionStatus({ state, label, detail, onRetry, ...props }) {
+var ConnectionStatus = React.forwardRef(function ConnectionStatus({ state, label, detail, onRetry, ...props }, ref) {
 	const c = connection[state];
 	return /* @__PURE__ */ jsx(StatusLine, {
+		ref,
 		slot: "connection-status",
 		state,
 		text: label ?? c.text,
@@ -113,17 +115,18 @@ function ConnectionStatus({ state, label, detail, onRetry, ...props }) {
 		onRetry: state === "offline" || state === "error" ? onRetry : void 0,
 		...props
 	});
-}
+});
 /** Whether local changes have reached the server. */
-function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTime = (d) => d.toLocaleTimeString([], {
+var SyncStatus = React.forwardRef(function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTime = (d) => d.toLocaleTimeString([], {
 	hour: "numeric",
 	minute: "2-digit"
-}), ...props }) {
+}), ...props }, ref) {
 	const s = sync[state];
 	let text = s.text;
 	if (state === "synced" && lastSynced) text = `Synced ${formatTime(lastSynced)}`;
 	if (state === "pending" && pendingCount) text = `${pendingCount} ${pendingCount === 1 ? "change" : "changes"} not synced yet`;
 	return /* @__PURE__ */ jsx(StatusLine, {
+		ref,
 		slot: "sync-status",
 		state,
 		text,
@@ -133,15 +136,16 @@ function SyncStatus({ state, lastSynced, pendingCount, detail, onRetry, formatTi
 		onRetry: state === "error" ? onRetry : void 0,
 		...props
 	});
-}
+});
 /**
 * A full-width notice for connection trouble. It renders nothing while
 * connected, connecting or unknown, so it can stay mounted.
 */
-function ConnectionBanner({ state, description, onRetry, className, ...props }) {
+var ConnectionBanner = React.forwardRef(function ConnectionBanner({ state, description, onRetry, className, ...props }, ref) {
 	if (state !== "offline" && state !== "error" && state !== "reconnecting") return null;
 	const title = state === "offline" ? "You are offline" : state === "reconnecting" ? "Reconnecting…" : "Could not connect";
 	return /* @__PURE__ */ jsxs(Alert, {
+		ref,
 		"data-slot": "connection-banner",
 		"data-state": state,
 		variant: state === "error" ? "destructive" : "warning",
@@ -161,7 +165,7 @@ function ConnectionBanner({ state, description, onRetry, className, ...props })
 			})]
 		})]
 	});
-}
+});
 //#endregion
 export { ConnectionBanner, ConnectionStatus, SyncStatus };
 

package/dist/components/connection-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"connection-status.js","names":[],"sources":["../../src/components/connection-status.tsx"],"sourcesContent":["import CloudOff from '@burtson-labs/icons/react/cloud-off';\nimport WifiOff from '@burtson-labs/icons/react/wifi-off';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Alert, AlertDescription, AlertTitle } from './alert';\nimport { Button } from './button';\nimport { Status } from './status';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * The host reports the state; these components only present it. `unknown`\n * means nobody has checked yet and never reads as connected.\n */\nexport type ConnectionState =\n  'connected' | 'connecting' | 'reconnecting' | 'offline' | 'error' | 'unknown';\n\nconst connection: Record<ConnectionState, { text: string; tone: Tone; pulse?: boolean }> = {\n  connected: { text: 'Connected', tone: 'success' },\n  connecting: { text: 'Connecting', tone: 'info', pulse: true },\n  reconnecting: { text: 'Reconnecting', tone: 'warning', pulse: true },\n  offline: { text: 'Offline', tone: 'neutral' },\n  error: { text: 'Connection failed', tone: 'danger' },\n  unknown: { text: 'Status unknown', tone: 'neutral' },\n};\n\nexport type SyncState = 'synced' | 'syncing' | 'pending' | 'offline' | 'error' | 'unknown';\n\nconst sync: Record<SyncState, { text: string; tone: Tone; pulse?: boolean }> = {\n  synced: { text: 'Synced', tone: 'success' },\n  syncing: { text: 'Syncing', tone: 'info', pulse: true },\n  pending: { text: 'Changes not synced yet', tone: 'warning' },\n  offline: { text: 'Offline, saved on this device', tone: 'neutral' },\n  error: { text: 'Sync failed', tone: 'danger' },\n  unknown: { text: 'Sync status unknown', tone: 'neutral' },\n};\n\nfunction WithDetail({\n  detail,\n  children,\n}: {\n  detail?: React.ReactNode;\n  children: React.ReactElement;\n}) {\n  if (!detail) return children;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent>{detail}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nfunction StatusLine({\n  slot,\n  state,\n  text,\n  tone,\n  pulse,\n  detail,\n  onRetry,\n  className,\n  ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n  slot: string;\n  state: string;\n  text: React.ReactNode;\n  tone: Tone;\n  pulse?: boolean;\n  detail?: React.ReactNode;\n  onRetry?: () => void;\n}) {\n  return (\n    <div\n      data-slot={slot}\n      data-state={state}\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n      {...props}\n    >\n      <WithDetail detail={detail}>\n        <Status\n          status={tone}\n          pulse={pulse}\n          tabIndex={detail ? 0 : undefined}\n          className=\"rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {text}\n          {detail && typeof detail === 'string' && <span className=\"sr-only\">. {detail}</span>}\n        </Status>\n      </WithDetail>\n      {onRetry && (\n        <Button type=\"button\" variant=\"link\" size=\"xs\" className=\"h-auto px-0\" onClick={onRetry}>\n          Retry\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport interface ConnectionStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** Overrides the default text, e.g. \"Connected to Ollama\". */\n  label?: React.ReactNode;\n  /** More detail in a tooltip, e.g. the endpoint or last error. */\n  detail?: React.ReactNode;\n  /** Offered when offline or failed. */\n  onRetry?: () => void;\n}\n\n/** A dot and a word for a live connection: model provider, gateway, socket. */\nfunction ConnectionStatus({ state, label, detail, onRetry, ...props }: ConnectionStatusProps) {\n  const c = connection[state];\n  return (\n    <StatusLine\n      slot=\"connection-status\"\n      state={state}\n      text={label ?? c.text}\n      tone={c.tone}\n      pulse={c.pulse}\n      detail={detail}\n      onRetry={state === 'offline' || state === 'error' ? onRetry : undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: SyncState;\n  /** When the last successful sync finished. */\n  lastSynced?: Date;\n  /** Changes waiting to go up. */\n  pendingCount?: number;\n  detail?: React.ReactNode;\n  /** Offered when sync failed. */\n  onRetry?: () => void;\n  /** Formats `lastSynced`; the default is the local time. */\n  formatTime?: (date: Date) => string;\n}\n\n/** Whether local changes have reached the server. */\nfunction SyncStatus({\n  state,\n  lastSynced,\n  pendingCount,\n  detail,\n  onRetry,\n  formatTime = (d) => d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),\n  ...props\n}: SyncStatusProps) {\n  const s = sync[state];\n  let text = s.text;\n  if (state === 'synced' && lastSynced) text = `Synced ${formatTime(lastSynced)}`;\n  if (state === 'pending' && pendingCount)\n    text = `${pendingCount} ${pendingCount === 1 ? 'change' : 'changes'} not synced yet`;\n  return (\n    <StatusLine\n      slot=\"sync-status\"\n      state={state}\n      text={text}\n      tone={s.tone}\n      pulse={s.pulse}\n      detail={detail}\n      onRetry={state === 'error' ? onRetry : undefined}\n      {...props}\n    />\n  );\n}\n\nexport interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** What still works, e.g. \"Messages you send will go out when you reconnect.\" */\n  description?: React.ReactNode;\n  onRetry?: () => void;\n}\n\n/**\n * A full-width notice for connection trouble. It renders nothing while\n * connected, connecting or unknown, so it can stay mounted.\n */\nfunction ConnectionBanner({\n  state,\n  description,\n  onRetry,\n  className,\n  ...props\n}: ConnectionBannerProps) {\n  if (state !== 'offline' && state !== 'error' && state !== 'reconnecting') return null;\n  const title =\n    state === 'offline'\n      ? 'You are offline'\n      : state === 'reconnecting'\n        ? 'Reconnecting…'\n        : 'Could not connect';\n  return (\n    <Alert\n      data-slot=\"connection-banner\"\n      data-state={state}\n      variant={state === 'error' ? 'destructive' : 'warning'}\n      className={cn('items-center', className)}\n      {...props}\n    >\n      {state === 'offline' ? <WifiOff aria-hidden /> : <CloudOff aria-hidden />}\n      <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2\">\n        <div className=\"min-w-0\">\n          <AlertTitle>{title}</AlertTitle>\n          {description && <AlertDescription>{description}</AlertDescription>}\n        </div>\n        {onRetry && state !== 'reconnecting' && (\n          <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>\n            Retry\n          </Button>\n        )}\n      </div>\n    </Alert>\n  );\n}\n\nexport { ConnectionBanner, ConnectionStatus, SyncStatus };\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,aAAqF;CACzF,WAAW;EAAE,MAAM;EAAa,MAAM;CAAU;CAChD,YAAY;EAAE,MAAM;EAAc,MAAM;EAAQ,OAAO;CAAK;CAC5D,cAAc;EAAE,MAAM;EAAgB,MAAM;EAAW,OAAO;CAAK;CACnE,SAAS;EAAE,MAAM;EAAW,MAAM;CAAU;CAC5C,OAAO;EAAE,MAAM;EAAqB,MAAM;CAAS;CACnD,SAAS;EAAE,MAAM;EAAkB,MAAM;CAAU;AACrD;AAIA,IAAM,OAAyE;CAC7E,QAAQ;EAAE,MAAM;EAAU,MAAM;CAAU;CAC1C,SAAS;EAAE,MAAM;EAAW,MAAM;EAAQ,OAAO;CAAK;CACtD,SAAS;EAAE,MAAM;EAA0B,MAAM;CAAU;CAC3D,SAAS;EAAE,MAAM;EAAiC,MAAM;CAAU;CAClE,OAAO;EAAE,MAAM;EAAe,MAAM;CAAS;CAC7C,SAAS;EAAE,MAAM;EAAuB,MAAM;CAAU;AAC1D;AAEA,SAAS,WAAW,EAClB,QACA,YAIC;CACD,IAAI,CAAC,QAAQ,OAAO;CACpB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;EAAS;CAAyB,CAAA,GAClD,oBAAC,gBAAD,EAAA,UAAiB,OAAuB,CAAA,CACjC,EAAA,CAAA;AAEb;AAEA,SAAS,WAAW,EAClB,MACA,OACA,MACA,MACA,OACA,QACA,SACA,WACA,GAAG,SASF;CACD,OACE,qBAAC,OAAD;EACE,aAAW;EACX,cAAY;EACZ,MAAK;EACL,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;EALN,UAAA,CAOE,oBAAC,YAAD;GAAoB;GAClB,UAAA,qBAAC,QAAD;IACE,QAAQ;IACD;IACP,UAAU,SAAS,IAAI,KAAA;IACvB,WAAU;IAJZ,UAAA,CAMG,MACA,UAAU,OAAO,WAAW,YAAY,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAA0B,MAAG,MAAa;IAC7E,CAAA,CAAA;;EACE,CAAA,GACX,WACC,oBAAC,QAAD;GAAQ,MAAK;GAAS,SAAQ;GAAO,MAAK;GAAK,WAAU;GAAc,SAAS;GAAS,UAAA;EAEjF,CAAA,CAEP;;AAET;;AAaA,SAAS,iBAAiB,EAAE,OAAO,OAAO,QAAQ,SAAS,GAAG,SAAgC;CAC5F,MAAM,IAAI,WAAW;CACrB,OACE,oBAAC,YAAD;EACE,MAAK;EACE;EACP,MAAM,SAAS,EAAE;EACjB,MAAM,EAAE;EACR,OAAO,EAAE;EACD;EACR,SAAS,UAAU,aAAa,UAAU,UAAU,UAAU,KAAA;EAC9D,GAAI;CACL,CAAA;AAEL;;AAgBA,SAAS,WAAW,EAClB,OACA,YACA,cACA,QACA,SACA,cAAc,MAAM,EAAE,mBAAmB,CAAC,GAAG;CAAE,MAAM;CAAW,QAAQ;AAAU,CAAC,GACnF,GAAG,SACe;CAClB,MAAM,IAAI,KAAK;CACf,IAAI,OAAO,EAAE;CACb,IAAI,UAAU,YAAY,YAAY,OAAO,UAAU,WAAW,UAAU;CAC5E,IAAI,UAAU,aAAa,cACzB,OAAO,GAAG,aAAa,GAAG,iBAAiB,IAAI,WAAW,UAAU;CACtE,OACE,oBAAC,YAAD;EACE,MAAK;EACE;EACD;EACN,MAAM,EAAE;EACR,OAAO,EAAE;EACD;EACR,SAAS,UAAU,UAAU,UAAU,KAAA;EACvC,GAAI;CACL,CAAA;AAEL;;;;;AAaA,SAAS,iBAAiB,EACxB,OACA,aACA,SACA,WACA,GAAG,SACqB;CACxB,IAAI,UAAU,aAAa,UAAU,WAAW,UAAU,gBAAgB,OAAO;CACjF,MAAM,QACJ,UAAU,YACN,oBACA,UAAU,iBACR,kBACA;CACR,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,SAAS,UAAU,UAAU,gBAAgB;EAC7C,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;EALN,UAAA,CAOG,UAAU,YAAY,oBAAC,SAAD,EAAS,eAAA,KAAa,CAAA,IAAI,oBAAC,UAAD,EAAU,eAAA,KAAa,CAAA,GACxE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA,GAC9B,eAAe,oBAAC,kBAAD,EAAA,UAAmB,YAA8B,CAAA,CAC9D;GACJ,CAAA,GAAA,WAAW,UAAU,kBACpB,oBAAC,QAAD;IAAQ,MAAK;IAAS,MAAK;IAAK,SAAQ;IAAU,SAAS;IAAS,UAAA;GAE5D,CAAA,CAEP;EACA,CAAA,CAAA;;AAEX"}
+{"version":3,"file":"connection-status.js","names":[],"sources":["../../src/components/connection-status.tsx"],"sourcesContent":["import CloudOff from '@burtson-labs/icons/react/cloud-off';\nimport WifiOff from '@burtson-labs/icons/react/wifi-off';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetRowClasses } from '../lib/utils';\n\nimport { Alert, AlertDescription, AlertTitle } from './alert';\nimport { Button } from './button';\nimport { Status } from './status';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'destructive' | 'info';\n\n/**\n * The host reports the state; these components only present it. `unknown`\n * means nobody has checked yet and never reads as connected.\n */\nexport type ConnectionState =\n  'connected' | 'connecting' | 'reconnecting' | 'offline' | 'error' | 'unknown';\n\nconst connection: Record<ConnectionState, { text: string; tone: Tone; pulse?: boolean }> = {\n  connected: { text: 'Connected', tone: 'success' },\n  connecting: { text: 'Connecting', tone: 'info', pulse: true },\n  reconnecting: { text: 'Reconnecting', tone: 'warning', pulse: true },\n  offline: { text: 'Offline', tone: 'neutral' },\n  error: { text: 'Connection failed', tone: 'destructive' },\n  unknown: { text: 'Status unknown', tone: 'neutral' },\n};\n\nexport type SyncState = 'synced' | 'syncing' | 'pending' | 'offline' | 'error' | 'unknown';\n\nconst sync: Record<SyncState, { text: string; tone: Tone; pulse?: boolean }> = {\n  synced: { text: 'Synced', tone: 'success' },\n  syncing: { text: 'Syncing', tone: 'info', pulse: true },\n  pending: { text: 'Changes not synced yet', tone: 'warning' },\n  offline: { text: 'Offline, saved on this device', tone: 'neutral' },\n  error: { text: 'Sync failed', tone: 'destructive' },\n  unknown: { text: 'Sync status unknown', tone: 'neutral' },\n};\n\nfunction WithDetail({\n  detail,\n  children,\n}: {\n  detail?: React.ReactNode;\n  children: React.ReactElement;\n}) {\n  if (!detail) return children;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent>{detail}</TooltipContent>\n    </Tooltip>\n  );\n}\n\ninterface StatusLineProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  slot: string;\n  state: string;\n  text: React.ReactNode;\n  tone: Tone;\n  pulse?: boolean;\n  detail?: React.ReactNode;\n  onRetry?: () => void;\n}\n\nconst StatusLine = React.forwardRef<HTMLDivElement, StatusLineProps>(function StatusLine(\n  { slot, state, text, tone, pulse, detail, onRetry, className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot={slot}\n      data-state={state}\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n      {...props}\n    >\n      <WithDetail detail={detail}>\n        <Status\n          status={tone}\n          pulse={pulse}\n          tabIndex={detail ? 0 : undefined}\n          className={cn('rounded-sm', focusRingClasses, detail && touchTargetRowClasses)}\n        >\n          {text}\n          {detail && typeof detail === 'string' && <span className=\"sr-only\">. {detail}</span>}\n        </Status>\n      </WithDetail>\n      {onRetry && (\n        <Button type=\"button\" variant=\"link\" size=\"xs\" className=\"h-auto px-0\" onClick={onRetry}>\n          Retry\n        </Button>\n      )}\n    </div>\n  );\n});\n\nexport interface ConnectionStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** Overrides the default text, e.g. \"Connected to Ollama\". */\n  label?: React.ReactNode;\n  /** More detail in a tooltip, e.g. the endpoint or last error. */\n  detail?: React.ReactNode;\n  /** Offered when offline or failed. */\n  onRetry?: () => void;\n}\n\n/** A dot and a word for a live connection: model provider, gateway, socket. */\nconst ConnectionStatus = React.forwardRef<HTMLDivElement, ConnectionStatusProps>(\n  function ConnectionStatus({ state, label, detail, onRetry, ...props }, ref) {\n    const c = connection[state];\n    return (\n      <StatusLine\n        ref={ref}\n        slot=\"connection-status\"\n        state={state}\n        text={label ?? c.text}\n        tone={c.tone}\n        pulse={c.pulse}\n        detail={detail}\n        onRetry={state === 'offline' || state === 'error' ? onRetry : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface SyncStatusProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: SyncState;\n  /** When the last successful sync finished. */\n  lastSynced?: Date;\n  /** Changes waiting to go up. */\n  pendingCount?: number;\n  detail?: React.ReactNode;\n  /** Offered when sync failed. */\n  onRetry?: () => void;\n  /** Formats `lastSynced`; the default is the local time. */\n  formatTime?: (date: Date) => string;\n}\n\n/** Whether local changes have reached the server. */\nconst SyncStatus = React.forwardRef<HTMLDivElement, SyncStatusProps>(function SyncStatus(\n  {\n    state,\n    lastSynced,\n    pendingCount,\n    detail,\n    onRetry,\n    formatTime = (d) => d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }),\n    ...props\n  },\n  ref,\n) {\n  const s = sync[state];\n  let text = s.text;\n  if (state === 'synced' && lastSynced) text = `Synced ${formatTime(lastSynced)}`;\n  if (state === 'pending' && pendingCount)\n    text = `${pendingCount} ${pendingCount === 1 ? 'change' : 'changes'} not synced yet`;\n  return (\n    <StatusLine\n      ref={ref}\n      slot=\"sync-status\"\n      state={state}\n      text={text}\n      tone={s.tone}\n      pulse={s.pulse}\n      detail={detail}\n      onRetry={state === 'error' ? onRetry : undefined}\n      {...props}\n    />\n  );\n});\n\nexport interface ConnectionBannerProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  state: ConnectionState;\n  /** What still works, e.g. \"Messages you send will go out when you reconnect.\" */\n  description?: React.ReactNode;\n  onRetry?: () => void;\n}\n\n/**\n * A full-width notice for connection trouble. It renders nothing while\n * connected, connecting or unknown, so it can stay mounted.\n */\nconst ConnectionBanner = React.forwardRef<HTMLDivElement, ConnectionBannerProps>(\n  function ConnectionBanner({ state, description, onRetry, className, ...props }, ref) {\n    if (state !== 'offline' && state !== 'error' && state !== 'reconnecting') return null;\n    const title =\n      state === 'offline'\n        ? 'You are offline'\n        : state === 'reconnecting'\n          ? 'Reconnecting…'\n          : 'Could not connect';\n    return (\n      <Alert\n        ref={ref}\n        data-slot=\"connection-banner\"\n        data-state={state}\n        variant={state === 'error' ? 'destructive' : 'warning'}\n        className={cn('items-center', className)}\n        {...props}\n      >\n        {state === 'offline' ? <WifiOff aria-hidden /> : <CloudOff aria-hidden />}\n        <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2\">\n          <div className=\"min-w-0\">\n            <AlertTitle>{title}</AlertTitle>\n            {description && <AlertDescription>{description}</AlertDescription>}\n          </div>\n          {onRetry && state !== 'reconnecting' && (\n            <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={onRetry}>\n              Retry\n            </Button>\n          )}\n        </div>\n      </Alert>\n    );\n  },\n);\n\nexport { ConnectionBanner, ConnectionStatus, SyncStatus };\n"],"mappings":"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"}

package/dist/components/context-menu.d.ts

@@ -7,24 +7,25 @@ import * as ContextMenuPrimitive from '../primitives/vendor/radix/react-context-
  * DropdownMenu, so a command can appear in both.
  */
 declare function ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>): React.JSX.Element;
-declare function ContextMenuTrigger(props: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): React.JSX.Element;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare function ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>): React.JSX.Element;
-declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): React.JSX.Element;
-declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuItemProps extends React.ComponentProps<typeof ContextMenuPrimitive.Item> {
     inset?: boolean;
     variant?: 'default' | 'destructive';
-}): React.JSX.Element;
-declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): React.JSX.Element;
+}
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function ContextMenuRadioGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): React.JSX.Element;
-declare function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>): React.JSX.Element;
-declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): React.JSX.Element;
-declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuShortcut: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare function ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>): React.JSX.Element;
-declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, };