@burtson-labs/ui 0.13.0 → 0.14.0

package/dist/components/command.d.ts

@@ -1,5 +1,5 @@
-import { Command as CommandPrimitive } from 'cmdk';
 import * as React from 'react';
+import { Command as CommandPrimitive } from '../primitives/vendor/cmdk';
 import { Dialog } from './dialog';
 declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
 /** A command palette in a dialog, the usual ⌘K surface. */

package/dist/components/command.js

@@ -1,12 +1,13 @@
+"use client";
 import { cn } from "../lib/utils.js";
+import { Command as pkg } from "../primitives/vendor/cmdk/index.js";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Search from "@burtson-labs/icons/react/search";
-import { Command } from "cmdk";
 //#region src/components/command.tsx
-function Command$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command, {
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(pkg, {
 		"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
@@ -22,7 +23,7 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 			children: [/* @__PURE__ */ jsxs(DialogHeader, {
 				className: "sr-only",
 				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
-			}), /* @__PURE__ */ jsx(Command$1, {
+			}), /* @__PURE__ */ jsx(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",
 				children
 			})]
@@ -36,7 +37,7 @@ function CommandInput({ className, ...props }) {
 		children: [/* @__PURE__ */ jsx(Search, {
 			className: "size-4 shrink-0 opacity-50",
 			"aria-hidden": true
-		}), /* @__PURE__ */ jsx(Command.Input, {
+		}), /* @__PURE__ */ jsx(pkg.Input, {
 			"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),
 			...props
@@ -44,35 +45,35 @@ function CommandInput({ className, ...props }) {
 	});
 }
 function CommandList({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command.List, {
+	return /* @__PURE__ */ jsx(pkg.List, {
 		"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) {
-	return /* @__PURE__ */ jsx(Command.Empty, {
+	return /* @__PURE__ */ jsx(pkg.Empty, {
 		"data-slot": "command-empty",
 		className: "py-6 text-center text-sm text-muted-foreground",
 		...props
 	});
 }
 function CommandGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command.Group, {
+	return /* @__PURE__ */ jsx(pkg.Group, {
 		"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),
 		...props
 	});
 }
 function CommandSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command.Separator, {
+	return /* @__PURE__ */ jsx(pkg.Separator, {
 		"data-slot": "command-separator",
 		className: cn("-mx-1 h-px bg-border", className),
 		...props
 	});
 }
 function CommandItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Command.Item, {
+	return /* @__PURE__ */ jsx(pkg.Item, {
 		"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),
 		...props
@@ -86,6 +87,6 @@ function CommandShortcut({ className, ...props }) {
 	});
 }
 //#endregion
-export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
 
 //# sourceMappingURL=command.js.map

package/dist/components/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","names":["Command","CommandPrimitive"],"sources":["../../src/components/command.tsx"],"sourcesContent":["import Search from '@burtson-labs/icons/react/search';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\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,SAASA,UAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACC,SAAD;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,oBAACD,WAAD;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,oBAACC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,oLACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,OAA4D;CAChF,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,2NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,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 } 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"}

package/dist/components/composer.js

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import * as React from "react";

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 } 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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"}

package/dist/components/connection-status.js

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { Alert, AlertDescription, AlertTitle } from "./alert.js";
 import { Button } from "./button.js";

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":"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"}
+{"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":"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"}

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

@@ -1,5 +1,5 @@
-import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
 import * as React from 'react';
+import * as ContextMenuPrimitive from '../primitives/vendor/radix/react-context-menu';
 /**
  * A right-click menu. Wrap the target in ContextMenuTrigger (use asChild to keep
  * your element); the menu opens at the pointer, and from the keyboard with the

package/dist/components/context-menu.js

@@ -1,6 +1,7 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { menuItemClasses, surfaceClasses } from "./popover.js";
-import { ContextMenu } from "radix-ui";
+import { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger } from "../primitives/vendor/radix/react-context-menu/context-menu.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ChevronRight from "@burtson-labs/icons/react/chevron-right";
@@ -12,33 +13,33 @@ import Check from "@burtson-labs/icons/react/check";
 * context-menu key or Shift+F10 on the focused target. Same rows as
 * DropdownMenu, so a command can appear in both.
 */
-function ContextMenu$1(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.Root, {
+function ContextMenu(props) {
+	return /* @__PURE__ */ jsx(Root, {
 		"data-slot": "context-menu",
 		...props
 	});
 }
 function ContextMenuTrigger(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+	return /* @__PURE__ */ jsx(Trigger, {
 		"data-slot": "context-menu-trigger",
 		...props
 	});
 }
 function ContextMenuGroup(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+	return /* @__PURE__ */ jsx(Group, {
 		"data-slot": "context-menu-group",
 		...props
 	});
 }
 function ContextMenuContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Content, {
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
 		"data-slot": "context-menu-content",
 		className: cn(surfaceClasses, "max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1", className),
 		...props
 	}) });
 }
 function ContextMenuItem({ className, inset, variant = "default", ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+	return /* @__PURE__ */ jsx(Item, {
 		"data-slot": "context-menu-item",
 		"data-inset": inset || void 0,
 		"data-variant": variant,
@@ -47,14 +48,14 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 	});
 }
 function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
-	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+	return /* @__PURE__ */ jsxs(CheckboxItem, {
 		"data-slot": "context-menu-checkbox-item",
 		className: cn(menuItemClasses, "pl-8", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, {
+			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(Check, {
 				className: "size-4 text-foreground",
 				"aria-hidden": true
 			}) })
@@ -62,24 +63,24 @@ function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
 	});
 }
 function ContextMenuRadioGroup(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "context-menu-radio-group",
 		...props
 	});
 }
 function ContextMenuRadioItem({ className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+	return /* @__PURE__ */ jsxs(RadioItem, {
 		"data-slot": "context-menu-radio-item",
 		className: cn(menuItemClasses, "pl-8", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
+			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
 		}), children]
 	});
 }
 function ContextMenuLabel({ className, inset, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Label, {
+	return /* @__PURE__ */ jsx(Label, {
 		"data-slot": "context-menu-label",
 		"data-inset": inset || void 0,
 		className: cn("px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8", className),
@@ -87,7 +88,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
 	});
 }
 function ContextMenuSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+	return /* @__PURE__ */ jsx(Separator, {
 		"data-slot": "context-menu-separator",
 		className: cn("-mx-1 my-1 h-px bg-border", className),
 		...props
@@ -101,13 +102,13 @@ function ContextMenuShortcut({ className, ...props }) {
 	});
 }
 function ContextMenuSub(props) {
-	return /* @__PURE__ */ jsx(ContextMenu.Sub, {
+	return /* @__PURE__ */ jsx(Sub, {
 		"data-slot": "context-menu-sub",
 		...props
 	});
 }
 function ContextMenuSubTrigger({ className, inset, children, ...props }) {
-	return /* @__PURE__ */ jsxs(ContextMenu.SubTrigger, {
+	return /* @__PURE__ */ jsxs(SubTrigger, {
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset || void 0,
 		className: cn(menuItemClasses, "data-[state=open]:bg-secondary", className),
@@ -119,13 +120,13 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 	});
 }
 function ContextMenuSubContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.SubContent, {
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(SubContent, {
 		"data-slot": "context-menu-sub-content",
 		className: cn(surfaceClasses, "min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden p-1", className),
 		...props
 	}) });
 }
 //#endregion
-export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
 
 //# sourceMappingURL=context-menu.js.map

package/dist/components/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":["ContextMenu","ContextMenuPrimitive","itemClasses"],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport { ContextMenu as ContextMenuPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { menuItemClasses as itemClasses, surfaceClasses } from './popover';\n\n/**\n * A right-click menu. Wrap the target in ContextMenuTrigger (use asChild to keep\n * your element); the menu opens at the pointer, and from the keyboard with the\n * context-menu key or Shift+F10 on the focused target. Same rows as\n * DropdownMenu, so a command can appear in both.\n */\nfunction ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\nfunction ContextMenuTrigger(props: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\nfunction ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset || undefined}\n      data-variant={variant}\n      className={cn(\n        itemClasses,\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction ContextMenuRadioGroup(\n  props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>,\n) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & { inset?: boolean }) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset || undefined}\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset || undefined}\n      className={cn(itemClasses, 'data-[state=open]:bg-secondary', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.SubContent\n        data-slot=\"context-menu-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n};\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive.Root","ContextMenuPrimitive.Trigger","ContextMenuPrimitive.Group","ContextMenuPrimitive.Portal","ContextMenuPrimitive.Content","ContextMenuPrimitive.Item","itemClasses","ContextMenuPrimitive.CheckboxItem","ContextMenuPrimitive.ItemIndicator","ContextMenuPrimitive.RadioGroup","ContextMenuPrimitive.RadioItem","ContextMenuPrimitive.Label","ContextMenuPrimitive.Separator","ContextMenuPrimitive.Sub","ContextMenuPrimitive.SubTrigger","ContextMenuPrimitive.SubContent"],"sources":["../../src/components/context-menu.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as ContextMenuPrimitive from '../primitives/vendor/radix/react-context-menu';\n\nimport { menuItemClasses as itemClasses, surfaceClasses } from './popover';\n\n/**\n * A right-click menu. Wrap the target in ContextMenuTrigger (use asChild to keep\n * your element); the menu opens at the pointer, and from the keyboard with the\n * context-menu key or Shift+F10 on the focused target. Same rows as\n * DropdownMenu, so a command can appear in both.\n */\nfunction ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\nfunction ContextMenuTrigger(props: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />;\n}\n\nfunction ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />;\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset || undefined}\n      data-variant={variant}\n      className={cn(\n        itemClasses,\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction ContextMenuRadioGroup(\n  props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>,\n) {\n  return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />;\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  );\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & { inset?: boolean }) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset || undefined}\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />;\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset || undefined}\n      className={cn(itemClasses, 'data-[state=open]:bg-secondary', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n    </ContextMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.SubContent\n        data-slot=\"context-menu-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  );\n}\n\nexport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n};\n"],"mappings":"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"}

package/dist/components/conversation.js

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","names":[],"sources":["../../src/components/conversation.tsx"],"sourcesContent":["import ArrowDown from '@burtson-labs/icons/react/arrow-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface ConversationProps extends React.ComponentProps<'div'> {\n  /** Shown instead of the messages when there are none. */\n  empty?: React.ReactNode;\n  /** Accessible name for the message log. */\n  label?: string;\n}\n\n/**\n * A scrolling message log that stays pinned to the newest message while it\n * streams, unless the reader has scrolled up; then a \"Jump to latest\" button\n * appears instead of yanking them back down.\n */\nfunction Conversation({\n  children,\n  empty,\n  label = 'Conversation',\n  className,\n  ...props\n}: ConversationProps) {\n  const scroller = React.useRef<HTMLDivElement>(null);\n  const content = React.useRef<HTMLDivElement>(null);\n  const pinned = React.useRef(true);\n  const [atBottom, setAtBottom] = React.useState(true);\n  const hasMessages = React.Children.toArray(children).length > 0;\n\n  const scrollToBottom = React.useCallback((behavior: ScrollBehavior = 'auto') => {\n    const el = scroller.current;\n    if (!el) return;\n    if (typeof el.scrollTo === 'function') el.scrollTo({ top: el.scrollHeight, behavior });\n    else el.scrollTop = el.scrollHeight;\n  }, []);\n\n  React.useEffect(() => {\n    const el = content.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    // Content grows while a reply streams; follow it only if pinned.\n    const ro = new ResizeObserver(() => {\n      if (pinned.current) scrollToBottom();\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [scrollToBottom]);\n\n  React.useEffect(() => {\n    if (pinned.current) scrollToBottom();\n  }, [children, scrollToBottom]);\n\n  const onScroll = () => {\n    const el = scroller.current;\n    if (!el) return;\n    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32;\n    pinned.current = bottom;\n    setAtBottom(bottom);\n  };\n\n  return (\n    <div data-slot=\"conversation\" className={cn('relative min-h-0', className)} {...props}>\n      <div\n        ref={scroller}\n        role=\"log\"\n        aria-label={label}\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        // A scrollable region must be reachable by keyboard (WCAG 2.1.1).\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        onScroll={onScroll}\n        className=\"size-full overflow-y-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n      >\n        <div ref={content} className=\"grid gap-5 p-4\">\n          {hasMessages ? children : empty}\n        </div>\n      </div>\n      {!atBottom && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            pinned.current = true;\n            setAtBottom(true);\n            scrollToBottom(\n              typeof matchMedia === 'function' &&\n                matchMedia('(prefers-reduced-motion: reduce)').matches\n                ? 'auto'\n                : 'smooth',\n            );\n          }}\n          className=\"absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 animate-in items-center gap-1.5 rounded-full border border-border-strong bg-surface-raised px-3 py-1.5 text-xs font-semibold shadow-md outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5\"\n        >\n          <ArrowDown aria-hidden /> Jump to latest\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { Conversation };\n"],"mappings":";;;;;;;;;;AAiBA,SAAS,aAAa,EACpB,UACA,OACA,QAAQ,gBACR,WACA,GAAG,SACiB;CACpB,MAAM,WAAW,MAAM,OAAuB,IAAI;CAClD,MAAM,UAAU,MAAM,OAAuB,IAAI;CACjD,MAAM,SAAS,MAAM,OAAO,IAAI;CAChC,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,IAAI;CACnD,MAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS;CAE9D,MAAM,iBAAiB,MAAM,aAAa,WAA2B,WAAW;EAC9E,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,IAAI,OAAO,GAAG,aAAa,YAAY,GAAG,SAAS;GAAE,KAAK,GAAG;GAAc;EAAS,CAAC;OAChF,GAAG,YAAY,GAAG;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB;EACpB,MAAM,KAAK,QAAQ;EACnB,IAAI,CAAC,MAAM,OAAO,mBAAmB,aAAa;EAElD,MAAM,KAAK,IAAI,qBAAqB;GAClC,IAAI,OAAO,SAAS,eAAe;EACrC,CAAC;EACD,GAAG,QAAQ,EAAE;EACb,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,gBAAgB;EACpB,IAAI,OAAO,SAAS,eAAe;CACrC,GAAG,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,iBAAiB;EACrB,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,MAAM,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,eAAe;EAClE,OAAO,UAAU;EACjB,YAAY,MAAM;CACpB;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;EAAhF,UAAA,CACE,oBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,aAAU;GACV,iBAAc;GAGd,UAAU;GACA;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD;IAAK,KAAK;IAAS,WAAU;IAC1B,UAAA,cAAc,WAAW;GACvB,CAAA;EACF,CAAA,GACJ,CAAC,YACA,qBAAC,UAAD;GACE,MAAK;GACL,eAAe;IACb,OAAO,UAAU;IACjB,YAAY,IAAI;IAChB,eACE,OAAO,eAAe,cACpB,WAAW,kCAAkC,CAAC,CAAC,UAC7C,SACA,QACN;GACF;GACA,WAAU;GAZZ,UAAA,CAcE,oBAAC,WAAD,EAAW,eAAA,KAAa,CAAA,GAAC,iBACnB;EAEP,CAAA,CAAA;;AAET"}
+{"version":3,"file":"conversation.js","names":[],"sources":["../../src/components/conversation.tsx"],"sourcesContent":["import ArrowDown from '@burtson-labs/icons/react/arrow-down';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface ConversationProps extends React.ComponentProps<'div'> {\n  /** Shown instead of the messages when there are none. */\n  empty?: React.ReactNode;\n  /** Accessible name for the message log. */\n  label?: string;\n}\n\n/**\n * A scrolling message log that stays pinned to the newest message while it\n * streams, unless the reader has scrolled up; then a \"Jump to latest\" button\n * appears instead of yanking them back down.\n */\nfunction Conversation({\n  children,\n  empty,\n  label = 'Conversation',\n  className,\n  ...props\n}: ConversationProps) {\n  const scroller = React.useRef<HTMLDivElement>(null);\n  const content = React.useRef<HTMLDivElement>(null);\n  const pinned = React.useRef(true);\n  const [atBottom, setAtBottom] = React.useState(true);\n  const hasMessages = React.Children.toArray(children).length > 0;\n\n  const scrollToBottom = React.useCallback((behavior: ScrollBehavior = 'auto') => {\n    const el = scroller.current;\n    if (!el) return;\n    if (typeof el.scrollTo === 'function') el.scrollTo({ top: el.scrollHeight, behavior });\n    else el.scrollTop = el.scrollHeight;\n  }, []);\n\n  React.useEffect(() => {\n    const el = content.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    // Content grows while a reply streams; follow it only if pinned.\n    const ro = new ResizeObserver(() => {\n      if (pinned.current) scrollToBottom();\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [scrollToBottom]);\n\n  React.useEffect(() => {\n    if (pinned.current) scrollToBottom();\n  }, [children, scrollToBottom]);\n\n  const onScroll = () => {\n    const el = scroller.current;\n    if (!el) return;\n    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32;\n    pinned.current = bottom;\n    setAtBottom(bottom);\n  };\n\n  return (\n    <div data-slot=\"conversation\" className={cn('relative min-h-0', className)} {...props}>\n      <div\n        ref={scroller}\n        role=\"log\"\n        aria-label={label}\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        // A scrollable region must be reachable by keyboard (WCAG 2.1.1).\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        onScroll={onScroll}\n        className=\"size-full overflow-y-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n      >\n        <div ref={content} className=\"grid gap-5 p-4\">\n          {hasMessages ? children : empty}\n        </div>\n      </div>\n      {!atBottom && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            pinned.current = true;\n            setAtBottom(true);\n            scrollToBottom(\n              typeof matchMedia === 'function' &&\n                matchMedia('(prefers-reduced-motion: reduce)').matches\n                ? 'auto'\n                : 'smooth',\n            );\n          }}\n          className=\"absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 animate-in items-center gap-1.5 rounded-full border border-border-strong bg-surface-raised px-3 py-1.5 text-xs font-semibold shadow-md outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5\"\n        >\n          <ArrowDown aria-hidden /> Jump to latest\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { Conversation };\n"],"mappings":";;;;;;;;;;;AAiBA,SAAS,aAAa,EACpB,UACA,OACA,QAAQ,gBACR,WACA,GAAG,SACiB;CACpB,MAAM,WAAW,MAAM,OAAuB,IAAI;CAClD,MAAM,UAAU,MAAM,OAAuB,IAAI;CACjD,MAAM,SAAS,MAAM,OAAO,IAAI;CAChC,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,IAAI;CACnD,MAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS;CAE9D,MAAM,iBAAiB,MAAM,aAAa,WAA2B,WAAW;EAC9E,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,IAAI,OAAO,GAAG,aAAa,YAAY,GAAG,SAAS;GAAE,KAAK,GAAG;GAAc;EAAS,CAAC;OAChF,GAAG,YAAY,GAAG;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB;EACpB,MAAM,KAAK,QAAQ;EACnB,IAAI,CAAC,MAAM,OAAO,mBAAmB,aAAa;EAElD,MAAM,KAAK,IAAI,qBAAqB;GAClC,IAAI,OAAO,SAAS,eAAe;EACrC,CAAC;EACD,GAAG,QAAQ,EAAE;EACb,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,gBAAgB;EACpB,IAAI,OAAO,SAAS,eAAe;CACrC,GAAG,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,iBAAiB;EACrB,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EACT,MAAM,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,eAAe;EAClE,OAAO,UAAU;EACjB,YAAY,MAAM;CACpB;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,oBAAoB,SAAS;EAAG,GAAI;EAAhF,UAAA,CACE,oBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,aAAU;GACV,iBAAc;GAGd,UAAU;GACA;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD;IAAK,KAAK;IAAS,WAAU;IAC1B,UAAA,cAAc,WAAW;GACvB,CAAA;EACF,CAAA,GACJ,CAAC,YACA,qBAAC,UAAD;GACE,MAAK;GACL,eAAe;IACb,OAAO,UAAU;IACjB,YAAY,IAAI;IAChB,eACE,OAAO,eAAe,cACpB,WAAW,kCAAkC,CAAC,CAAC,UAC7C,SACA,QACN;GACF;GACA,WAAU;GAZZ,UAAA,CAcE,oBAAC,WAAD,EAAW,eAAA,KAAa,CAAA,GAAC,iBACnB;EAEP,CAAA,CAAA;;AAET"}

package/dist/components/copy-button.js

@@ -1,3 +1,4 @@
+"use client";
 import { IconButton } from "./icon-button.js";
 import { toast } from "./toaster.js";
 import * as React from "react";

package/dist/components/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","names":["_Fragment"],"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport Copy from '@burtson-labs/icons/react/copy';\nimport * as React from 'react';\n\nimport { IconButton, type IconButtonProps } from './icon-button';\nimport { toast } from './toaster';\n\nexport interface CopyButtonProps extends Omit<IconButtonProps, 'label' | 'children' | 'onClick'> {\n  /** The text to put on the clipboard. */\n  value: string;\n  /** Accessible name, e.g. \"Copy API key\". */\n  label?: string;\n  onCopySuccess?: () => void;\n  onCopyError?: (error: unknown) => void;\n}\n\n/**\n * Icon button that copies `value` and shows a check for a moment. When the\n * browser blocks the clipboard it raises a toast (needs a mounted Toaster)\n * asking the person to copy by hand.\n */\nfunction CopyButton({\n  value,\n  label = 'Copy',\n  variant = 'ghost',\n  size = 'icon-sm',\n  onCopySuccess,\n  onCopyError,\n  ...props\n}: CopyButtonProps) {\n  const [message, setMessage] = React.useState('');\n  const [copied, setCopied] = React.useState(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  React.useEffect(() => () => clearTimeout(timer.current), []);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      setMessage('Copied to clipboard.');\n      onCopySuccess?.();\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => setCopied(false), 1600);\n    } catch (error) {\n      setMessage('Copy blocked. Select the text and copy it manually.');\n      onCopyError?.(error);\n      toast({\n        title: 'Copy blocked by the browser',\n        description: 'Select the text and copy it by hand.',\n        variant: 'destructive',\n      });\n    }\n  };\n\n  return (\n    <>\n      <IconButton\n        data-slot=\"copy-button\"\n        label={copied ? 'Copied' : label}\n        variant={variant}\n        size={size}\n        onClick={() => void copy()}\n        {...props}\n      >\n        {copied ? <Check aria-hidden className=\"text-success\" /> : <Copy aria-hidden />}\n      </IconButton>\n      <span role=\"status\" className=\"sr-only\">\n        {message}\n      </span>\n    </>\n  );\n}\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;AAqBA,SAAS,WAAW,EAClB,OACA,QAAQ,QACR,UAAU,SACV,OAAO,WACP,eACA,aACA,GAAG,SACe;CAClB,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAChD,MAAM,QAAQ,MAAM,OAAkD,KAAA,CAAS;CAC/E,MAAM,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAE3D,MAAM,OAAO,YAAY;EACvB,IAAI;GACF,MAAM,UAAU,UAAU,UAAU,KAAK;GACzC,UAAU,IAAI;GACd,WAAW,sBAAsB;GACjC,gBAAgB;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB,UAAU,KAAK,GAAG,IAAI;EACzD,SAAS,OAAO;GACd,WAAW,qDAAqD;GAChE,cAAc,KAAK;GACnB,MAAM;IACJ,OAAO;IACP,aAAa;IACb,SAAS;GACX,CAAC;EACH;CACF;CAEA,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACE,aAAU;EACV,OAAO,SAAS,WAAW;EAClB;EACH;EACN,eAAe,KAAK,KAAK;EACzB,GAAI;EAEH,UAAA,SAAS,oBAAC,OAAD;GAAO,eAAA;GAAY,WAAU;EAAgB,CAAA,IAAI,oBAAC,MAAD,EAAM,eAAA,KAAa,CAAA;CACpE,CAAA,GACZ,oBAAC,QAAD;EAAM,MAAK;EAAS,WAAU;EAC3B,UAAA;CACG,CAAA,CACN,EAAA,CAAA;AAEN"}
+{"version":3,"file":"copy-button.js","names":["_Fragment"],"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport Copy from '@burtson-labs/icons/react/copy';\nimport * as React from 'react';\n\nimport { IconButton, type IconButtonProps } from './icon-button';\nimport { toast } from './toaster';\n\nexport interface CopyButtonProps extends Omit<IconButtonProps, 'label' | 'children' | 'onClick'> {\n  /** The text to put on the clipboard. */\n  value: string;\n  /** Accessible name, e.g. \"Copy API key\". */\n  label?: string;\n  onCopySuccess?: () => void;\n  onCopyError?: (error: unknown) => void;\n}\n\n/**\n * Icon button that copies `value` and shows a check for a moment. When the\n * browser blocks the clipboard it raises a toast (needs a mounted Toaster)\n * asking the person to copy by hand.\n */\nfunction CopyButton({\n  value,\n  label = 'Copy',\n  variant = 'ghost',\n  size = 'icon-sm',\n  onCopySuccess,\n  onCopyError,\n  ...props\n}: CopyButtonProps) {\n  const [message, setMessage] = React.useState('');\n  const [copied, setCopied] = React.useState(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  React.useEffect(() => () => clearTimeout(timer.current), []);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      setMessage('Copied to clipboard.');\n      onCopySuccess?.();\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => setCopied(false), 1600);\n    } catch (error) {\n      setMessage('Copy blocked. Select the text and copy it manually.');\n      onCopyError?.(error);\n      toast({\n        title: 'Copy blocked by the browser',\n        description: 'Select the text and copy it by hand.',\n        variant: 'destructive',\n      });\n    }\n  };\n\n  return (\n    <>\n      <IconButton\n        data-slot=\"copy-button\"\n        label={copied ? 'Copied' : label}\n        variant={variant}\n        size={size}\n        onClick={() => void copy()}\n        {...props}\n      >\n        {copied ? <Check aria-hidden className=\"text-success\" /> : <Copy aria-hidden />}\n      </IconButton>\n      <span role=\"status\" className=\"sr-only\">\n        {message}\n      </span>\n    </>\n  );\n}\n\nexport { CopyButton };\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAS,WAAW,EAClB,OACA,QAAQ,QACR,UAAU,SACV,OAAO,WACP,eACA,aACA,GAAG,SACe;CAClB,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,KAAK;CAChD,MAAM,QAAQ,MAAM,OAAkD,KAAA,CAAS;CAC/E,MAAM,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAE3D,MAAM,OAAO,YAAY;EACvB,IAAI;GACF,MAAM,UAAU,UAAU,UAAU,KAAK;GACzC,UAAU,IAAI;GACd,WAAW,sBAAsB;GACjC,gBAAgB;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB,UAAU,KAAK,GAAG,IAAI;EACzD,SAAS,OAAO;GACd,WAAW,qDAAqD;GAChE,cAAc,KAAK;GACnB,MAAM;IACJ,OAAO;IACP,aAAa;IACb,SAAS;GACX,CAAC;EACH;CACF;CAEA,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD;EACE,aAAU;EACV,OAAO,SAAS,WAAW;EAClB;EACH;EACN,eAAe,KAAK,KAAK;EACzB,GAAI;EAEH,UAAA,SAAS,oBAAC,OAAD;GAAO,eAAA;GAAY,WAAU;EAAgB,CAAA,IAAI,oBAAC,MAAD,EAAM,eAAA,KAAa,CAAA;CACpE,CAAA,GACZ,oBAAC,QAAD;EAAM,MAAK;EAAS,WAAU;EAC3B,UAAA;CACG,CAAA,CACN,EAAA,CAAA;AAEN"}

package/dist/components/data-table.js

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
@@ -375,6 +376,7 @@ function ErrorMessage({ error, onRetry }) {
 	});
 }
 var cardLabelClass = "text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase";
+var liftControls = "[&_a]:relative [&_a]:z-10 [&_button]:relative [&_button]:z-10 [&_input]:relative [&_input]:z-10 [&_select]:relative [&_select]:z-10 [&_textarea]:relative [&_textarea]:z-10";
 /**
 * The phone layout: a list of articles, one per row, each named by its title.
 * The title is the row's open button (its hit area covers the card); the
@@ -464,14 +466,14 @@ function DataTableCards({ "aria-label": ariaLabel, columns, rows, getRowId, getR
 						]
 					}),
 					subtitle.length > 0 && /* @__PURE__ */ jsx("div", {
-						className: cn("-mt-2 grid min-w-0 gap-0.5", onToggle && "pl-7"),
+						className: cn("-mt-2 grid min-w-0 gap-0.5", liftControls, onToggle && "pl-7"),
 						children: subtitle.map((c) => /* @__PURE__ */ jsx("div", {
 							className: "min-w-0 text-sm text-muted-foreground [overflow-wrap:anywhere]",
 							children: show(c, row)
 						}, c.id))
 					}),
 					fields.length > 0 && /* @__PURE__ */ jsx("dl", {
-						className: "grid grid-cols-2 gap-x-4 gap-y-2.5 text-sm",
+						className: cn("grid grid-cols-2 gap-x-4 gap-y-2.5 text-sm", liftControls),
 						children: fields.map((c) => /* @__PURE__ */ jsxs("div", {
 							className: "min-w-0",
 							children: [/* @__PURE__ */ jsx("dt", {