@uipath/apollo-wind 2.72.2 → 2.73.0

package/dist/components/ui/alert-dialog.cjs

@@ -76,7 +76,7 @@ const AlertDialogContent = /*#__PURE__*/ external_react_namespaceObject.forwardR
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_alert_dialog_namespaceObject.Content, {
                 ref: ref,
                 "data-slot": "alert-dialog-content",
-                className: (0, index_cjs_namespaceObject.cn)(dialog_surface_cjs_namespaceObject.dialogSurfaceClassName, 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', className),
+                className: (0, index_cjs_namespaceObject.cn)(dialog_surface_cjs_namespaceObject.dialogSurfaceClassName, 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-center', className),
                 ...props
             })
         ]

package/dist/components/ui/alert-dialog.js

@@ -38,7 +38,7 @@ const AlertDialogContent = /*#__PURE__*/ forwardRef(({ className, container, ...
             /*#__PURE__*/ jsx(Content, {
                 ref: ref,
                 "data-slot": "alert-dialog-content",
-                className: cn(dialogSurfaceClassName, 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', className),
+                className: cn(dialogSurfaceClassName, 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-center', className),
                 ...props
             })
         ]

package/dist/components/ui/attachment.cjs

@@ -40,13 +40,14 @@ const react_slot_namespaceObject = require("@radix-ui/react-slot");
 const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
+const external_tooltip_cjs_namespaceObject = require("./tooltip.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const attachmentVariants = (0, external_class_variance_authority_namespaceObject.cva)('group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed', {
     variants: {
         size: {
-            default: 'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
-            sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
-            xs: 'gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1'
+            default: 'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2 in-data-[density=compact]:has-data-[slot=attachment-content]:py-1.5 in-data-[density=compact]:has-data-[slot=attachment-media]:p-1.5',
+            sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5 in-data-[density=compact]:has-data-[slot=attachment-content]:py-1 in-data-[density=compact]:has-data-[slot=attachment-media]:p-1',
+            xs: 'gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1 in-data-[density=compact]:has-data-[slot=attachment-content]:py-0.5 in-data-[density=compact]:has-data-[slot=attachment-media]:p-0.5'
         },
         orientation: {
             horizontal: 'min-w-40 items-center',
@@ -71,7 +72,7 @@ const Attachment = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ cl
         ...props
     }));
 Attachment.displayName = 'Attachment';
-const attachmentMediaVariants = (0, external_class_variance_authority_namespaceObject.cva)("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+const attachmentMediaVariants = (0, external_class_variance_authority_namespaceObject.cva)("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 in-data-[density=compact]:w-8 in-data-[density=compact]:group-data-[size=sm]/attachment:w-7 in-data-[density=compact]:group-data-[size=xs]/attachment:w-6 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
     variants: {
         variant: {
             icon: '',
@@ -99,12 +100,43 @@ const AttachmentContent = /*#__PURE__*/ external_react_namespaceObject.forwardRe
         ...props
     }));
 AttachmentContent.displayName = 'AttachmentContent';
-const AttachmentTitle = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-        ref: ref,
+const AttachmentTitle = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, truncationTooltip = true, children, ...props }, ref)=>{
+    const local = external_react_namespaceObject.useRef(null);
+    const setRef = external_react_namespaceObject.useMemo(()=>(0, index_cjs_namespaceObject.composeRefs)(ref, local), [
+        ref
+    ]);
+    const [open, setOpen] = external_react_namespaceObject.useState(false);
+    const title = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        ref: setRef,
         "data-slot": "attachment-title",
         className: (0, index_cjs_namespaceObject.cn)('block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer', className),
-        ...props
-    }));
+        ...props,
+        children: children
+    });
+    if (!truncationTooltip) return title;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+        delayDuration: 300,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+            open: open,
+            onOpenChange: (next)=>{
+                const node = local.current;
+                setOpen(next && !!node && node.scrollWidth > node.clientWidth);
+            },
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                    asChild: true,
+                    children: title
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipPortal, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                        className: "max-w-80 break-all",
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+});
 AttachmentTitle.displayName = 'AttachmentTitle';
 const AttachmentDescription = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
         ref: ref,

package/dist/components/ui/attachment.d.ts

@@ -6,6 +6,11 @@ import { type ButtonProps } from './button';
  * components. `state` drives the chrome: `idle` is a dashed placeholder, `uploading` and
  * `processing` shimmer the title, `error` tints it. `AttachmentGroup` scrolls a row of them with
  * faded edges.
+ *
+ * Compact density (Wind's own; Material's chips do not change): inside an ancestor with
+ * `data-density="compact"` every size steps its padding and media down one notch (an `xs` chip
+ * with a title goes from 38px to 30px tall); the type stays, so names remain legible. The padding
+ * classes are `has-*` variants, so a host override needs the same variant, as before.
  */
 declare const attachmentVariants: (props?: ({
     size?: "default" | "sm" | "xs" | null | undefined;
@@ -23,7 +28,12 @@ export interface AttachmentMediaProps extends React.HTMLAttributes<HTMLDivElemen
 }
 declare const AttachmentMedia: React.ForwardRefExoticComponent<AttachmentMediaProps & React.RefAttributes<HTMLDivElement>>;
 declare const AttachmentContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const AttachmentTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export interface AttachmentTitleProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Show the full title in a tooltip on hover when it is cut off. On by default. */
+    truncationTooltip?: boolean;
+}
+/** The file name, cut off with an ellipsis. A cut-off name shows in full in a tooltip on hover. */
+declare const AttachmentTitle: React.ForwardRefExoticComponent<AttachmentTitleProps & React.RefAttributes<HTMLSpanElement>>;
 declare const AttachmentDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 declare const AttachmentActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export interface AttachmentActionProps extends ButtonProps {

package/dist/components/ui/attachment.js

@@ -1,15 +1,16 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useMemo, useRef, useState } from "react";
 import { Button } from "./button.js";
-import { cn } from "../../lib/index.js";
+import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { cn, composeRefs } from "../../lib/index.js";
 const attachmentVariants = cva('group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed', {
     variants: {
         size: {
-            default: 'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
-            sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
-            xs: 'gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1'
+            default: 'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2 in-data-[density=compact]:has-data-[slot=attachment-content]:py-1.5 in-data-[density=compact]:has-data-[slot=attachment-media]:p-1.5',
+            sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5 in-data-[density=compact]:has-data-[slot=attachment-content]:py-1 in-data-[density=compact]:has-data-[slot=attachment-media]:p-1',
+            xs: 'gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1 in-data-[density=compact]:has-data-[slot=attachment-content]:py-0.5 in-data-[density=compact]:has-data-[slot=attachment-media]:p-0.5'
         },
         orientation: {
             horizontal: 'min-w-40 items-center',
@@ -34,7 +35,7 @@ const Attachment = /*#__PURE__*/ forwardRef(({ className, state = 'done', size =
         ...props
     }));
 Attachment.displayName = 'Attachment';
-const attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+const attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 in-data-[density=compact]:w-8 in-data-[density=compact]:group-data-[size=sm]/attachment:w-7 in-data-[density=compact]:group-data-[size=xs]/attachment:w-6 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
     variants: {
         variant: {
             icon: '',
@@ -62,12 +63,43 @@ const AttachmentContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref
         ...props
     }));
 AttachmentContent.displayName = 'AttachmentContent';
-const AttachmentTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
-        ref: ref,
+const AttachmentTitle = /*#__PURE__*/ forwardRef(({ className, truncationTooltip = true, children, ...props }, ref)=>{
+    const local = useRef(null);
+    const setRef = useMemo(()=>composeRefs(ref, local), [
+        ref
+    ]);
+    const [open, setOpen] = useState(false);
+    const title = /*#__PURE__*/ jsx("span", {
+        ref: setRef,
         "data-slot": "attachment-title",
         className: cn('block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer', className),
-        ...props
-    }));
+        ...props,
+        children: children
+    });
+    if (!truncationTooltip) return title;
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 300,
+        children: /*#__PURE__*/ jsxs(Tooltip, {
+            open: open,
+            onOpenChange: (next)=>{
+                const node = local.current;
+                setOpen(next && !!node && node.scrollWidth > node.clientWidth);
+            },
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: title
+                }),
+                /*#__PURE__*/ jsx(TooltipPortal, {
+                    children: /*#__PURE__*/ jsx(TooltipContent, {
+                        className: "max-w-80 break-all",
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+});
 AttachmentTitle.displayName = 'AttachmentTitle';
 const AttachmentDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
         ref: ref,

package/dist/components/ui/bubble.cjs

@@ -73,7 +73,7 @@ const BubbleContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Comp, {
         ref: ref,
         "data-slot": "bubble-content",
-        className: (0, index_cjs_namespaceObject.cn)('w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed break-words group-data-[align=end]/bubble:self-end', className),
+        className: (0, index_cjs_namespaceObject.cn)('w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-(--bubble-padding-x,0.75rem) py-(--bubble-padding-y,0.5rem) text-(length:--bubble-font-size,0.875rem) leading-(--bubble-leading,1.625) break-words group-data-[align=end]/bubble:self-end in-data-[density=compact]:[--bubble-font-size:0.75rem] in-data-[density=compact]:[--bubble-leading:1.5] in-data-[density=compact]:[--bubble-padding-x:0.625rem] in-data-[density=compact]:[--bubble-padding-y:0.375rem]', className),
         ...props
     });
 });

package/dist/components/ui/bubble.d.ts

@@ -4,6 +4,12 @@ import * as React from 'react';
  * The surface of a chat message, ported from shadcn/ui's chat components. `Bubble` positions and
  * colours; `BubbleContent` is the padded box the text lives in, so a bubble can also carry
  * reactions or actions outside that box. Use inside `MessageContent`, or standalone with `align`.
+ *
+ * Compact density: inside an ancestor with `data-density="compact"` the text drops to 12px, as
+ * Material's does, and the padding tightens to 10px by 6px (Wind's own; Material keeps it).
+ * There is no prop: the host opts in by setting the attribute (the Wind chat sets it on its root).
+ * Compact sets CSS variables the base classes read, so a host className on the root wins in
+ * both densities.
  */
 declare const BubbleGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const bubbleVariants: (props?: ({

package/dist/components/ui/bubble.js

@@ -41,7 +41,7 @@ const BubbleContent = /*#__PURE__*/ forwardRef(({ asChild = false, className, ..
     return /*#__PURE__*/ jsx(Comp, {
         ref: ref,
         "data-slot": "bubble-content",
-        className: cn('w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed break-words group-data-[align=end]/bubble:self-end', className),
+        className: cn('w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-(--bubble-padding-x,0.75rem) py-(--bubble-padding-y,0.5rem) text-(length:--bubble-font-size,0.875rem) leading-(--bubble-leading,1.625) break-words group-data-[align=end]/bubble:self-end in-data-[density=compact]:[--bubble-font-size:0.75rem] in-data-[density=compact]:[--bubble-leading:1.5] in-data-[density=compact]:[--bubble-padding-x:0.625rem] in-data-[density=compact]:[--bubble-padding-y:0.375rem]', className),
         ...props
     });
 });

package/dist/components/ui/chat-composer.cjs

@@ -44,6 +44,7 @@ const external_class_variance_authority_namespaceObject = require("class-varianc
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const use_ancestor_density_cjs_namespaceObject = require("../../lib/use-ancestor-density.cjs");
 const external_attachment_cjs_namespaceObject = require("./attachment.cjs");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_file_validation_cjs_namespaceObject = require("./file-validation.cjs");
@@ -79,7 +80,12 @@ const chatComposerVariants = (0, external_class_variance_authority_namespaceObje
 });
 const NO_ATTACHMENTS = [];
 const ChatComposer = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, value: valueProp, defaultValue, onValueChange, onSubmit, status = 'idle', onStop, disabled = false, submitDisabled = false, density, attachments = NO_ATTACHMENTS, onRemoveAttachment, strings, ...props }, ref)=>{
-    const resolvedDensity = density ?? 'comfortable';
+    const formRef = external_react_namespaceObject.useRef(null);
+    const setFormRef = external_react_namespaceObject.useMemo(()=>(0, index_cjs_namespaceObject.composeRefs)(ref, formRef), [
+        ref
+    ]);
+    const ancestorDensity = (0, use_ancestor_density_cjs_namespaceObject.useAncestorDensity)(formRef, null == density);
+    const resolvedDensity = density ?? ancestorDensity ?? 'comfortable';
     const controlled = void 0 !== valueProp;
     const [uncontrolledValue, setUncontrolledValue] = external_react_namespaceObject.useState(defaultValue ?? '');
     const value = controlled ? valueProp : uncontrolledValue;
@@ -152,7 +158,7 @@ const ChatComposer = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChatComposerContext.Provider, {
         value: context,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("form", {
-            ref: ref,
+            ref: setFormRef,
             "data-slot": "chat-composer",
             "data-status": status,
             "data-density": resolvedDensity,

package/dist/components/ui/chat-composer.d.ts

@@ -25,6 +25,12 @@ import { type InputGroupProps, type InputGroupTextareaProps } from './input-grou
  *
  * Enter sends and Shift+Enter starts a new line. While `status` is `streaming` the submit button
  * becomes a stop button and Enter does not send.
+ *
+ * Density: `density="compact"` gives a one-row textarea and tighter spacing. Without the prop the
+ * composer is compact while any ancestor has `data-density="compact"`, as the other chat
+ * primitives are, so it is compact inside a compact chat panel. The prop always wins. That
+ * ancestor is watched for changes; one that only gains the attribute later is picked up on the
+ * composer's next render.
  */
 export interface ChatComposerStrings {
     /** Accessible name of the textarea. */

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

@@ -3,7 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { ArrowUp, CircleAlert, FileText, Paperclip, Square, TriangleAlert, X } from "lucide-react";
 import { createContext, forwardRef, useCallback, useContext, useMemo, useRef, useState } from "react";
-import { cn } from "../../lib/index.js";
+import { cn, composeRefs } from "../../lib/index.js";
+import { useAncestorDensity } from "../../lib/use-ancestor-density.js";
 import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle } from "./attachment.js";
 import { Button } from "./button.js";
 import { validateFiles } from "./file-validation.js";
@@ -39,7 +40,12 @@ const chatComposerVariants = cva('flex w-full min-w-0 flex-col', {
 });
 const NO_ATTACHMENTS = [];
 const ChatComposer = /*#__PURE__*/ forwardRef(({ className, children, value: valueProp, defaultValue, onValueChange, onSubmit, status = 'idle', onStop, disabled = false, submitDisabled = false, density, attachments = NO_ATTACHMENTS, onRemoveAttachment, strings, ...props }, ref)=>{
-    const resolvedDensity = density ?? 'comfortable';
+    const formRef = useRef(null);
+    const setFormRef = useMemo(()=>composeRefs(ref, formRef), [
+        ref
+    ]);
+    const ancestorDensity = useAncestorDensity(formRef, null == density);
+    const resolvedDensity = density ?? ancestorDensity ?? 'comfortable';
     const controlled = void 0 !== valueProp;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? '');
     const value = controlled ? valueProp : uncontrolledValue;
@@ -112,7 +118,7 @@ const ChatComposer = /*#__PURE__*/ forwardRef(({ className, children, value: val
     return /*#__PURE__*/ jsx(ChatComposerContext.Provider, {
         value: context,
         children: /*#__PURE__*/ jsxs("form", {
-            ref: ref,
+            ref: setFormRef,
             "data-slot": "chat-composer",
             "data-status": status,
             "data-density": resolvedDensity,

package/dist/components/ui/citation.cjs

@@ -40,7 +40,7 @@ const DEFAULT_CITATION_STRINGS = {
 const citationVariants = (0, external_class_variance_authority_namespaceObject.cva)('mx-0.5 inline-flex cursor-pointer items-center justify-center rounded-full bg-muted align-text-top font-medium leading-none text-muted-foreground tabular-nums transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', {
     variants: {
         size: {
-            default: 'h-4.5 min-w-4.5 px-1.5 text-[11px]',
+            default: 'h-(--citation-size,1.125rem) min-w-(--citation-size,1.125rem) px-(--citation-padding,0.375rem) text-(length:--citation-font-size,11px)',
             sm: 'h-4 min-w-4 px-1 text-[10px]',
             lg: 'h-5 min-w-5 px-1.5 text-xs'
         }
@@ -49,7 +49,8 @@ const citationVariants = (0, external_class_variance_authority_namespaceObject.c
         size: 'default'
     }
 });
-const Citation = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, size = 'default', index, title, snippet, source, href, onSelect, onClick, onFocus, onBlur, onPointerEnter, onPointerLeave, preview = true, previewSide = 'top', onActiveChange, strings, 'aria-label': ariaLabel, children, ...props }, ref)=>{
+const COMPACT_CITATION_CLASSES = 'in-data-[density=compact]:[--citation-size:1rem] in-data-[density=compact]:[--citation-padding:0.25rem] in-data-[density=compact]:[--citation-font-size:10px]';
+const Citation = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, size: sizeProp, index, title, snippet, source, href, onSelect, onClick, onFocus, onBlur, onPointerEnter, onPointerLeave, preview = true, previewSide = 'top', onActiveChange, strings, 'aria-label': ariaLabel, children, ...props }, ref)=>{
     const text = {
         ...DEFAULT_CITATION_STRINGS,
         ...strings
@@ -82,6 +83,7 @@ const Citation = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ clas
     external_react_namespaceObject.useEffect(()=>()=>{
             if (active.current) onActiveChangeRef.current?.(false);
         }, []);
+    const size = sizeProp ?? 'default';
     const name = ariaLabel ?? text.label(String(index), title || void 0);
     const hasPreview = preview && Boolean(title || snippet || source);
     const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
@@ -92,7 +94,7 @@ const Citation = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ clas
         "aria-label": name,
         className: (0, index_cjs_namespaceObject.cn)(citationVariants({
             size
-        }), className),
+        }), null == sizeProp && COMPACT_CITATION_CLASSES, className),
         onClick: (event)=>{
             onClick?.(event);
             if (hasPreview) {

package/dist/components/ui/citation.d.ts

@@ -6,6 +6,12 @@ import { HoverCardContent } from './hover-card';
  * not navigate on its own: `onSelect` receives the citation and the event, so a host can run its
  * `citation-click` pre-hook and decide whether to open `href`. The payload drops an `href` that is
  * not http(s), mailto, tel or relative, so it is safe to open.
+ *
+ * Compact density: without a `size`, inside an ancestor with `data-density="compact"` it takes
+ * the `sm` look (10px, Material's compact citation). An explicit `size` always wins.
+ * There is no prop: the host opts in by setting the attribute (the Wind chat sets it on its root).
+ * Compact sets CSS variables the base classes read, so a host className on the root wins in
+ * both densities.
  */
 export interface CitationData {
     /** The source number, usually 1-based. Shown in the pill unless `children` are given. */

package/dist/components/ui/citation.js

@@ -10,7 +10,7 @@ const DEFAULT_CITATION_STRINGS = {
 const citationVariants = cva('mx-0.5 inline-flex cursor-pointer items-center justify-center rounded-full bg-muted align-text-top font-medium leading-none text-muted-foreground tabular-nums transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', {
     variants: {
         size: {
-            default: 'h-4.5 min-w-4.5 px-1.5 text-[11px]',
+            default: 'h-(--citation-size,1.125rem) min-w-(--citation-size,1.125rem) px-(--citation-padding,0.375rem) text-(length:--citation-font-size,11px)',
             sm: 'h-4 min-w-4 px-1 text-[10px]',
             lg: 'h-5 min-w-5 px-1.5 text-xs'
         }
@@ -19,7 +19,8 @@ const citationVariants = cva('mx-0.5 inline-flex cursor-pointer items-center jus
         size: 'default'
     }
 });
-const Citation = /*#__PURE__*/ forwardRef(({ className, size = 'default', index, title, snippet, source, href, onSelect, onClick, onFocus, onBlur, onPointerEnter, onPointerLeave, preview = true, previewSide = 'top', onActiveChange, strings, 'aria-label': ariaLabel, children, ...props }, ref)=>{
+const COMPACT_CITATION_CLASSES = 'in-data-[density=compact]:[--citation-size:1rem] in-data-[density=compact]:[--citation-padding:0.25rem] in-data-[density=compact]:[--citation-font-size:10px]';
+const Citation = /*#__PURE__*/ forwardRef(({ className, size: sizeProp, index, title, snippet, source, href, onSelect, onClick, onFocus, onBlur, onPointerEnter, onPointerLeave, preview = true, previewSide = 'top', onActiveChange, strings, 'aria-label': ariaLabel, children, ...props }, ref)=>{
     const text = {
         ...DEFAULT_CITATION_STRINGS,
         ...strings
@@ -52,6 +53,7 @@ const Citation = /*#__PURE__*/ forwardRef(({ className, size = 'default', index,
     useEffect(()=>()=>{
             if (active.current) onActiveChangeRef.current?.(false);
         }, []);
+    const size = sizeProp ?? 'default';
     const name = ariaLabel ?? text.label(String(index), title || void 0);
     const hasPreview = preview && Boolean(title || snippet || source);
     const button = /*#__PURE__*/ jsx("button", {
@@ -62,7 +64,7 @@ const Citation = /*#__PURE__*/ forwardRef(({ className, size = 'default', index,
         "aria-label": name,
         className: cn(citationVariants({
             size
-        }), className),
+        }), null == sizeProp && COMPACT_CITATION_CLASSES, className),
         onClick: (event)=>{
             onClick?.(event);
             if (hasPreview) {

package/dist/components/ui/code-block.cjs

@@ -149,8 +149,8 @@ const codeBlockTheme = {
         color: token('rest'),
         background: 'none',
         fontFamily: 'var(--font-mono)',
-        fontSize: '0.8125rem',
-        lineHeight: 1.6,
+        fontSize: 'var(--code-block-font-size, 0.8125rem)',
+        lineHeight: 'var(--code-block-line-height, 1.6)',
         margin: 0,
         padding: '0.75rem 1rem',
         overflow: 'auto',
@@ -285,7 +285,7 @@ const CodeBlockHeader = /*#__PURE__*/ external_react_namespaceObject.forwardRef(
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: ref,
         "data-slot": "code-block-header",
-        className: (0, index_cjs_namespaceObject.cn)('flex items-center justify-between gap-2 border-b border-border-subtle py-1 pr-1 pl-4', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex items-center justify-between gap-2 border-b border-border-subtle py-(--code-block-header-py,0.25rem) pr-1 pl-(--code-block-header-pl,1rem) in-data-[density=compact]:[--code-block-header-py:0.125rem] in-data-[density=compact]:[--code-block-header-pl:0.75rem] in-data-[density=compact]:[&_button]:size-6 in-data-[density=compact]:[&_button_svg]:size-3.5', className),
         ...props,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -336,14 +336,14 @@ const code_block_CodeBlockBody = /*#__PURE__*/ external_react_namespaceObject.me
         children: code
     });
 });
-const CodeBlock = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ code, language, wrap = false, showLineNumbers = false, hideHeader = false, actions, strings, className, ...props }, ref)=>{
+const CodeBlock = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ code, language, wrap = false, showLineNumbers = false, hideHeader = false, actions, body, strings, className, ...props }, ref)=>{
     const source = code.replace(/\n$/, '');
     const resolved = resolveLanguage(language);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: ref,
         "data-slot": "code-block",
         "data-language": resolved ?? 'text',
-        className: (0, index_cjs_namespaceObject.cn)('min-w-0 overflow-hidden rounded-lg border border-border-subtle bg-surface-overlay text-foreground', className),
+        className: (0, index_cjs_namespaceObject.cn)('min-w-0 overflow-hidden rounded-lg border border-border-subtle bg-surface-overlay text-foreground in-data-[density=compact]:[--code-block-font-size:0.75rem] in-data-[density=compact]:[--code-block-line-height:1.5]', className),
         ...props,
         children: [
             !hideHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CodeBlockHeader, {
@@ -352,7 +352,7 @@ const CodeBlock = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ cod
                 strings: strings,
                 children: actions
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(code_block_CodeBlockBody, {
+            null != body && false !== body ? body : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(code_block_CodeBlockBody, {
                 code: source,
                 language: resolved,
                 wrap: wrap,

package/dist/components/ui/code-block.d.ts

@@ -32,6 +32,12 @@ export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement
     hideHeader?: boolean;
     /** Extra header actions, such as preview or expand, placed before the copy button. */
     actions?: React.ReactNode;
+    /**
+     * Shown instead of the highlighted source, for example a preview of it toggled from `actions`.
+     * The header and its copy button stay and still copy `code`. `undefined`, `null` and `false`
+     * keep the source, so `body={preview && <Preview />}` works.
+     */
+    body?: React.ReactNode;
     strings?: Partial<CodeBlockStrings>;
 }
 declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/code-block.js

@@ -91,8 +91,8 @@ const codeBlockTheme = {
         color: token('rest'),
         background: 'none',
         fontFamily: 'var(--font-mono)',
-        fontSize: '0.8125rem',
-        lineHeight: 1.6,
+        fontSize: 'var(--code-block-font-size, 0.8125rem)',
+        lineHeight: 'var(--code-block-line-height, 1.6)',
         margin: 0,
         padding: '0.75rem 1rem',
         overflow: 'auto',
@@ -227,7 +227,7 @@ const CodeBlockHeader = /*#__PURE__*/ forwardRef(({ code, language, strings, cla
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         "data-slot": "code-block-header",
-        className: cn('flex items-center justify-between gap-2 border-b border-border-subtle py-1 pr-1 pl-4', className),
+        className: cn('flex items-center justify-between gap-2 border-b border-border-subtle py-(--code-block-header-py,0.25rem) pr-1 pl-(--code-block-header-pl,1rem) in-data-[density=compact]:[--code-block-header-py:0.125rem] in-data-[density=compact]:[--code-block-header-pl:0.75rem] in-data-[density=compact]:[&_button]:size-6 in-data-[density=compact]:[&_button_svg]:size-3.5', className),
         ...props,
         children: [
             /*#__PURE__*/ jsx("span", {
@@ -278,14 +278,14 @@ const code_block_CodeBlockBody = /*#__PURE__*/ memo(function({ code, language, w
         children: code
     });
 });
-const CodeBlock = /*#__PURE__*/ forwardRef(({ code, language, wrap = false, showLineNumbers = false, hideHeader = false, actions, strings, className, ...props }, ref)=>{
+const CodeBlock = /*#__PURE__*/ forwardRef(({ code, language, wrap = false, showLineNumbers = false, hideHeader = false, actions, body, strings, className, ...props }, ref)=>{
     const source = code.replace(/\n$/, '');
     const resolved = resolveLanguage(language);
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         "data-slot": "code-block",
         "data-language": resolved ?? 'text',
-        className: cn('min-w-0 overflow-hidden rounded-lg border border-border-subtle bg-surface-overlay text-foreground', className),
+        className: cn('min-w-0 overflow-hidden rounded-lg border border-border-subtle bg-surface-overlay text-foreground in-data-[density=compact]:[--code-block-font-size:0.75rem] in-data-[density=compact]:[--code-block-line-height:1.5]', className),
         ...props,
         children: [
             !hideHeader && /*#__PURE__*/ jsx(CodeBlockHeader, {
@@ -294,7 +294,7 @@ const CodeBlock = /*#__PURE__*/ forwardRef(({ code, language, wrap = false, show
                 strings: strings,
                 children: actions
             }),
-            /*#__PURE__*/ jsx(code_block_CodeBlockBody, {
+            null != body && false !== body ? body : /*#__PURE__*/ jsx(code_block_CodeBlockBody, {
                 code: source,
                 language: resolved,
                 wrap: wrap,

package/dist/components/ui/context-menu.cjs

@@ -96,7 +96,7 @@ ContextMenuSubTrigger.displayName = react_context_menu_namespaceObject.SubTrigge
 const ContextMenuSubContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_context_menu_namespaceObject.SubContent, {
         ref: ref,
         "data-slot": "context-menu-sub-content",
-        className: (0, index_cjs_namespaceObject.cn)('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]', className),
+        className: (0, index_cjs_namespaceObject.cn)('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)', className),
         ...props
     }));
 ContextMenuSubContent.displayName = react_context_menu_namespaceObject.SubContent.displayName;
@@ -107,7 +107,7 @@ const ContextMenuContent = /*#__PURE__*/ external_react_namespaceObject.forwardR
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_context_menu_namespaceObject.Content, {
             ref: ref,
             "data-slot": "context-menu-content",
-            className: (0, index_cjs_namespaceObject.cn)('z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]', className),
+            className: (0, index_cjs_namespaceObject.cn)('z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)', className),
             ...props
         })
     });

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

@@ -54,7 +54,7 @@ ContextMenuSubTrigger.displayName = SubTrigger.displayName;
 const ContextMenuSubContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SubContent, {
         ref: ref,
         "data-slot": "context-menu-sub-content",
-        className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]', className),
+        className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)', className),
         ...props
     }));
 ContextMenuSubContent.displayName = SubContent.displayName;
@@ -65,7 +65,7 @@ const ContextMenuContent = /*#__PURE__*/ forwardRef(({ className, container, ...
         children: /*#__PURE__*/ jsx(Content, {
             ref: ref,
             "data-slot": "context-menu-content",
-            className: cn('z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]', className),
+            className: cn('z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)', className),
             ...props
         })
     });