@cognite/aura 0.1.5 → 0.1.6

package/dist/components/ui/core/input-group/input-group.js

@@ -1,66 +1,80 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { cva as u } from "class-variance-authority";
-import { cn as e } from "../../../../lib/utils.js";
-import { Button as d } from "../button/button.js";
-import { Input as l } from "../input/input.js";
-import { Textarea as c } from "../textarea/textarea.js";
-const g = o(
-  ({ className: a, ...t }, n) => /* @__PURE__ */ r(
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { cva as l } from "class-variance-authority";
+import { cn as n } from "../../../../lib/utils.js";
+import { Button as g } from "../button/button.js";
+import { Input as c } from "../input/input.js";
+import { Textarea as b } from "../textarea/textarea.js";
+const h = s(
+  ({ className: t, ...o }, r) => /* @__PURE__ */ e(
     "div",
     {
-      ref: n,
+      ref: r,
       "data-slot": "input-group",
       role: "group",
-      className: e(
-        "group/input-group bg-background border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-sm transition-colors transition-shadow outline-none",
+      className: n(
+        "group/input-group bg-muted-background border border-transparent relative flex w-full items-stretch rounded-lg shadow-none transition-[color,box-shadow,border-color,background-color] outline-none",
+        "hover:border-border-emphasized",
         "h-9 min-w-0 has-[>textarea]:h-auto",
         "has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-start]]:[&>input]:rounded-l-none has-[>[data-align=inline-start]]:[&>textarea]:rounded-l-none",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2 has-[>[data-align=inline-end]]:[&>input]:rounded-r-none has-[>[data-align=inline-end]]:[&>textarea]:rounded-r-none",
+        "has-[>[data-align=inline-end]]:[&>input]:rounded-r-none has-[>[data-align=inline-end]]:[&>textarea]:rounded-r-none",
+        "[&>input]:pr-2 [&>textarea]:pr-2",
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-        "has-[[data-slot=input-group-control]:focus-visible]:shadow-focus-ring has-[[data-slot=input-group-control]:focus-visible]:border-transparent",
-        "has-[[data-slot=input-group-control][aria-invalid=true]]:shadow-focus-ring-destructive has-[[data-slot=input-group-control][aria-invalid=true]]:border-transparent",
+        "has-[[data-slot=input-group-control]:focus-visible:not(:read-only)]:bg-background has-[[data-slot=input-group-control]:focus-visible:not(:read-only)]:shadow-focus-ring has-[[data-slot=input-group-control]:focus-visible:not(:read-only)]:border-transparent",
+        "has-[[data-slot=input-group-control][aria-invalid=true]:not(:focus-visible)]:shadow-focus-ring-destructive has-[[data-slot=input-group-control][aria-invalid=true]:not(:focus-visible)]:border-transparent",
         "has-[[data-slot=input-group-control]:read-only]:border-transparent has-[[data-slot=input-group-control]:read-only]:shadow-none",
-        "hover:has-[[data-slot=input-group-control]:read-only]:border-transparent hover:has-[[data-slot=input-group-control]:read-only]:bg-accent hover:has-[[data-slot=input-group-control]:read-only]:text-accent-foreground",
-        a
+        "hover:has-[[data-slot=input-group-control]:read-only]:border-transparent hover:has-[[data-slot=input-group-control]:read-only]:bg-accent-background hover:has-[[data-slot=input-group-control]:read-only]:text-muted-foreground",
+        t
       ),
-      ...t
+      ...o
     }
   )
 );
-g.displayName = "InputGroup";
-const h = u(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-sm group-data-[disabled=true]/input-group:opacity-50",
+h.displayName = "InputGroup";
+const u = "[&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg]:transition-colors group-hover/input-group:group-has-[[data-slot=input-group-control]:enabled:not(:read-only)]/input-group:[&>svg]:text-foreground group-has-[[data-slot=input-group-control]:enabled:focus-visible:not(:read-only)]/input-group:[&>svg]:text-foreground group-has-[[data-slot=input-group-control]:enabled:not(:placeholder-shown):not(:read-only)]/input-group:[&>svg]:text-foreground group-has-[[data-slot=input-group-control][aria-invalid=true]:enabled:not(:read-only)]/input-group:[&>svg]:text-foreground group-has-[[data-slot=input-group-control]:read-only:enabled]/input-group:[&>svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:disabled]/input-group:[&>svg]:text-disabled-foreground", d = "[&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg]:transition-colors", v = l(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-2 text-xs font-normal select-none [&>kbd]:rounded-sm",
   {
     variants: {
       align: {
-        "inline-start": "order-first pl-3 has-[>button]:-ml-2 has-[>kbd]:-ml-1.5",
-        "inline-end": "order-last pr-3 has-[>button]:-mr-2 has-[>kbd]:-mr-1.5",
-        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+        "inline-start": n(
+          "order-first min-h-0 rounded-l-lg pl-2",
+          u
+        ),
+        "inline-end": n(
+          "order-last min-h-0 rounded-r-lg pr-2 has-[>button]:pr-1 has-[kbd]:pr-1 has-[[class*=stepper]]:pr-1",
+          d
+        ),
+        "block-start": n(
+          "order-first w-full justify-start px-2 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+          u
+        ),
+        "block-end": n(
+          "order-last w-full justify-start px-2 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+          d
+        )
       }
     },
     defaultVariants: {
       align: "inline-start"
     }
   }
-), b = o(({ className: a, align: t = "inline-start", ...n }, i) => /* @__PURE__ */ r(
+), f = s(({ className: t, align: o = "inline-start", ...r }, i) => /* @__PURE__ */ e(
   "div",
   {
     ref: i,
     role: "group",
     "data-slot": "input-group-addon",
-    "data-align": t,
-    className: e(h({ align: t }), a),
-    onClick: (s) => {
-      s.target instanceof HTMLElement && s.target.closest("button") || s.currentTarget.parentElement?.querySelector('[data-slot="input-group-control"]')?.focus();
+    "data-align": o,
+    className: n(v({ align: o }), t),
+    onClick: (a) => {
+      a.target instanceof HTMLElement && a.target.closest("button") || a.target instanceof Node && !a.currentTarget.contains(a.target) || a.currentTarget.parentElement?.querySelector('[data-slot="input-group-control"]')?.focus();
     },
-    ...n
+    ...r
   }
 ));
-b.displayName = "InputGroupAddon";
-const m = u(
+f.displayName = "InputGroupAddon";
+const m = l(
   "text-sm shadow-none flex gap-2 items-center",
   {
     variants: {
@@ -75,70 +89,86 @@ const m = u(
       size: "xs"
     }
   }
-), f = o(
-  ({ className: a, type: t = "button", variant: n = "ghost", size: i = "xs", ...s }, p) => /* @__PURE__ */ r(
-    d,
+), x = s(
+  ({ className: t, type: o = "button", variant: r = "ghost", size: i = "xs", ...a }, p) => /* @__PURE__ */ e(
+    g,
     {
       ref: p,
-      type: t,
+      type: o,
       "data-size": i,
-      variant: n,
-      className: e(m({ size: i }), a),
-      ...s
+      variant: r,
+      className: n(m({ size: i }), t),
+      ...a
     }
   )
 );
-f.displayName = "InputGroupButton";
-const v = o(
-  ({ className: a, ...t }, n) => /* @__PURE__ */ r(
+x.displayName = "InputGroupButton";
+const y = s(
+  ({ className: t, ...o }, r) => /* @__PURE__ */ e(
     "span",
     {
-      ref: n,
+      ref: r,
       "data-slot": "input-group-text",
-      className: e(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        a
+      className: n(
+        "text-muted-foreground flex items-center gap-2 text-xs leading-[14px] tracking-[-0.00833em] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground",
+        t
       ),
-      ...t
+      ...o
     }
   )
 );
-v.displayName = "InputGroupText";
-const x = o(
-  ({ className: a, ...t }, n) => /* @__PURE__ */ r(
-    l,
+y.displayName = "InputGroupText";
+const k = s(
+  ({ className: t, ...o }, r) => /* @__PURE__ */ e(
+    c,
     {
-      ref: n,
+      ref: r,
       "data-slot": "input-group-control",
-      className: e(
-        "flex-1 rounded-md border-0 bg-transparent shadow-none hover:bg-transparent hover:text-current dark:bg-transparent",
-        "focus-visible:shadow-none focus-visible:border-transparent",
-        "aria-invalid:focus-visible:shadow-none aria-invalid:focus-visible:border-transparent",
-        a
+      className: n(
+        "min-h-0 h-full min-w-0 flex-1 rounded-lg border-0 shadow-none hover:text-muted-foreground",
+        "tracking-[-0.04em]",
+        "focus-visible:not(:read-only):bg-background focus-visible:shadow-none focus-visible:border-transparent",
+        "read-only:focus-visible:bg-muted-background",
+        "aria-invalid:shadow-none aria-invalid:border-transparent",
+        "aria-invalid:[&:not(:placeholder-shown)]:border-transparent",
+        "aria-invalid:focus-visible:not(:read-only):bg-background aria-invalid:focus-visible:shadow-none aria-invalid:focus-visible:border-transparent",
+        "read-only:aria-invalid:focus-visible:bg-muted-background",
+        "hover:border-0",
+        t
       ),
-      ...t
+      ...o
     }
   )
 );
-x.displayName = "InputGroupInput";
-const y = o(({ className: a, ...t }, n) => /* @__PURE__ */ r(
-  c,
+k.displayName = "InputGroupInput";
+const w = s(({ className: t, ...o }, r) => /* @__PURE__ */ e(
+  b,
   {
-    ref: n,
+    ref: r,
     "data-slot": "input-group-control",
-    className: e(
-      "flex-1 resize-none rounded-md border-0 bg-transparent py-3 shadow-none focus-visible:shadow-none focus-visible:border-transparent aria-invalid:focus-visible:shadow-none aria-invalid:focus-visible:border-transparent dark:bg-transparent hover:bg-transparent hover:text-current",
-      a
+    className: n(
+      "min-h-0 flex-1 resize-none rounded-lg border-0 bg-transparent py-3 shadow-none",
+      "tracking-[-0.04em]",
+      "hover:border-0 hover:bg-transparent hover:text-muted-foreground",
+      "filled:border-transparent",
+      "focus-visible:shadow-none focus-visible:border-transparent",
+      "read-only:focus-visible:bg-muted-background",
+      "aria-invalid:shadow-none aria-invalid:border-transparent",
+      "aria-invalid:[&:not(:placeholder-shown)]:border-transparent",
+      "aria-invalid:focus-visible:not(:read-only):bg-background aria-invalid:focus-visible:shadow-none aria-invalid:focus-visible:border-transparent",
+      "read-only:aria-invalid:focus-visible:bg-muted-background",
+      "read-only:text-muted-foreground [&:read-only:not(:placeholder-shown)]:text-muted-foreground",
+      t
     ),
-    ...t
+    ...o
   }
 ));
-y.displayName = "InputGroupTextarea";
+w.displayName = "InputGroupTextarea";
 export {
-  g as InputGroup,
-  b as InputGroupAddon,
-  f as InputGroupButton,
-  x as InputGroupInput,
-  v as InputGroupText,
-  y as InputGroupTextarea
+  h as InputGroup,
+  f as InputGroupAddon,
+  x as InputGroupButton,
+  k as InputGroupInput,
+  y as InputGroupText,
+  w as InputGroupTextarea
 };

package/dist/components/ui/core/label/label.d.ts

@@ -1,2 +1,4 @@
-declare const Label: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+declare const Label: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    required?: boolean;
+} & import('react').RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/components/ui/core/label/label.js

@@ -1,19 +1,42 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { cn as l } from "../../../../lib/utils.js";
-const n = d(({ className: e, children: t, ...r }, a) => /* @__PURE__ */ o(
-  "label",
-  {
-    ref: a,
-    "data-slot": "label",
-    className: l(
-      "flex items-center text-muted-foreground dark:text-muted-foreground text-sm font-medium leading-4.5 pb-1 select-none group-data-[disabled=true]:disabled-foreground group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:cursor-not-allowed group-data-[disabled=true]:opacity-50",
-      e
-    ),
-    ...r,
-    children: t
-  }
-));
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { cn as s } from "../../../../lib/utils.js";
+const n = i(
+  ({ className: t, children: r, required: a = !1, ...d }, l) => /* @__PURE__ */ o(
+    "label",
+    {
+      ref: l,
+      "data-slot": "label",
+      className: s(
+        "flex items-center text-muted-foreground dark:text-muted-foreground text-sm font-medium leading-4.5 pb-2 select-none group-data-[disabled=true]:disabled-foreground group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:cursor-not-allowed group-data-[disabled=true]:opacity-50",
+        t
+      ),
+      ...d,
+      children: [
+        r,
+        a ? /* @__PURE__ */ e(
+          "span",
+          {
+            "data-slot": "label-required-indicator",
+            className: "inline-block shrink-0 self-start pt-0.5",
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                "aria-hidden": "true",
+                width: "5",
+                height: "8",
+                viewBox: "0 0 5 8",
+                fill: "currentColor",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ e("path", { d: "M2.01082 7.19387L2.09648 5.29125L0.491434 6.32372L0 5.46709L1.70424 4.59693L0 3.72678L0.491434 2.87015L2.09648 3.90261L2.01082 2H2.98918L2.90352 3.90261L4.50857 2.87015L5 3.72678L3.29576 4.59693L5 5.46709L4.50857 6.32372L2.90352 5.29125L2.98918 7.19387H2.01082Z" })
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  )
+);
 n.displayName = "Label";
 export {
   n as Label

package/dist/components/ui/core/label/label.metadata.js

@@ -1,8 +1,8 @@
 const e = {
   name: "Label",
   status: "in-progress-code-review",
-  description: "An accessible text label for form controls, built on top of Base UI Label. Supports association via `htmlFor` and integrates with disabled states.",
-  llmUsage: 'Use `<Label htmlFor="field-id">Text</Label>` together with an input that has `id="field-id"` so clicking the label focuses the field. For required fields, include a visual indicator such as the asterisk icon from `/asterisk.svg`.'
+  description: "An accessible text label for form controls, built on top of Base UI Label. Supports association via `htmlFor`, integrates with disabled states, and can render Aura's visual required indicator.",
+  llmUsage: 'Use `<Label htmlFor="field-id">Text</Label>` together with a form control that has `id="field-id"` so clicking the label focuses the field. Use `Label.required` for the visual asterisk only, and set `required` on the form control itself when the field must be required for validation and assistive technology.'
 };
 export {
   e as LabelMetadata

package/dist/components/ui/core/message/message-response-default-streamdown-controls.d.ts

@@ -0,0 +1,11 @@
+import { ControlsConfig } from 'streamdown';
+/**
+ * Default Streamdown `controls` for assistant markdown (`MessageResponse`).
+ *
+ * - **Mermaid:** Enables copy, download, and pan/zoom (AX-117, AX-118). Fullscreen is
+ *   disabled: it uses a portal to `document.body`, which breaks scoped / prefixed CSS in
+ *   micro-frontend hosts until upstream supports a configurable portal root.
+ * - **Code / table:** Off so chat keeps a simpler surface; callers may override via the
+ *   `controls` prop on `MessageResponse`.
+ */
+export declare const MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS: Exclude<ControlsConfig, boolean>;

package/dist/components/ui/core/message/message-response-default-streamdown-controls.js

@@ -0,0 +1,13 @@
+const e = {
+  code: !1,
+  table: !1,
+  mermaid: {
+    copy: !0,
+    download: !0,
+    fullscreen: !1,
+    panZoom: !0
+  }
+};
+export {
+  e as MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS
+};

package/dist/components/ui/core/message/message.d.ts

@@ -41,7 +41,7 @@ declare const MessageBranchNext: ({ children, ...props }: MessageBranchNextProps
 type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
 declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => import("react/jsx-runtime").JSX.Element;
 type MessageResponseProps = ComponentProps<typeof Streamdown>;
-declare const MessageResponse: import('react').MemoExoticComponent<({ className, components, plugins, ...props }: MessageResponseProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MessageResponse: import('react').MemoExoticComponent<({ className, components, plugins, controls, ...props }: MessageResponseProps) => import("react/jsx-runtime").JSX.Element>;
 type MessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {
     data: FileUIPart;
     className?: string;

package/dist/components/ui/core/message/message.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { createContext as i, memo as b } from "react";
 import { mermaid as _ } from "@streamdown/mermaid";
 import "@tabler/icons-react";
@@ -7,8 +7,9 @@ import { cn as d } from "../../../../lib/utils.js";
 import "../avatar/avatar.js";
 import { Button as u } from "../button/button.js";
 import "../button-group/button-group.js";
-import { Tooltip as w, TooltipTrigger as g, TooltipContent as f } from "../tooltip/tooltip.js";
-const z = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
+import { Tooltip as w, TooltipTrigger as g, TooltipContent as k } from "../tooltip/tooltip.js";
+import { MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS as v } from "./message-response-default-streamdown-controls.js";
+const q = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
   "div",
   {
     "data-slot": "message",
@@ -19,7 +20,7 @@ const z = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
     ),
     ...a
   }
-), A = ({
+), O = ({
   children: t,
   className: o,
   ...a
@@ -30,14 +31,14 @@ const z = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
     className: d(
       "is-user:dark flex flex-col gap-4 rounded-md text-base leading-tight tracking-tightest",
       "max-w-4/5",
-      "group-[.is-user]:overflow-hidden group-[.is-user]:bg-accent group-[.is-user]:p-2 group-[.is-user]:text-accent-foreground",
+      "group-[.is-user]:overflow-hidden group-[.is-user]:bg-accent-background group-[.is-user]:p-2 group-[.is-user]:text-foreground",
       "group-[.is-assistant]:text-foreground group-[.is-assistant]:pt-1",
       o
     ),
     ...a,
     children: t
   }
-), B = ({
+), z = ({
   className: t,
   children: o,
   ...a
@@ -49,16 +50,16 @@ const z = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
     ...a,
     children: o
   }
-), S = ({
+), D = ({
   tooltip: t,
   children: o,
   label: a,
   className: r,
-  variant: m = "ghost",
+  variant: s = "ghost",
   size: c = "sm",
   ...l
 }) => {
-  const s = /* @__PURE__ */ n(
+  const n = /* @__PURE__ */ m(
     u,
     {
       "data-slot": "message-action",
@@ -68,7 +69,7 @@ const z = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
       ),
       size: c,
       type: "button",
-      variant: m,
+      variant: s,
       ...l,
       children: [
         o,
@@ -76,15 +77,15 @@ const z = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
       ]
     }
   );
-  return t ? /* @__PURE__ */ n(w, { children: [
-    /* @__PURE__ */ e(g, { render: s }),
-    /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e("p", { children: t }) })
-  ] }) : s;
+  return t ? /* @__PURE__ */ m(w, { children: [
+    /* @__PURE__ */ e(g, { render: n }),
+    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e("p", { children: t }) })
+  ] }) : n;
 };
 i(
   null
 );
-const k = {
+const f = {
   h1: ({ children: t }) => /* @__PURE__ */ e("h1", { className: "mt-0 mb-2 scroll-m-20 text-xl font-medium tracking-tightest", children: t }),
   h2: ({ children: t }) => /* @__PURE__ */ e("h2", { className: "mt-4 mb-1 scroll-m-20 text-lg font-medium tracking-tightest", children: t }),
   h3: ({ children: t }) => /* @__PURE__ */ e("h3", { className: "mt-4 mb-1 scroll-m-20 text-base font-medium tracking-tighter", children: t }),
@@ -104,20 +105,35 @@ const k = {
   a: ({ children: t, href: o, ...a }) => /* @__PURE__ */ e(
     "a",
     {
-      className: "text-foreground-link no-underline hover:underline underline-offset-4",
+      className: "text-link-foreground no-underline hover:underline underline-offset-4",
       href: o,
       ...a,
       children: t
     }
   ),
-  table: ({ children: t }) => /* @__PURE__ */ e("table", { className: "my-6 w-full", children: t }),
+  table: ({ children: t }) => /* @__PURE__ */ e(
+    "div",
+    {
+      className: "my-6 overflow-x-auto",
+      tabIndex: 0,
+      role: "group",
+      "aria-label": "Atlas AI Chat Table",
+      children: /* @__PURE__ */ e("table", { className: "w-full", children: t })
+    }
+  ),
   thead: ({ children: t }) => /* @__PURE__ */ e("thead", { children: t }),
   tbody: ({ children: t }) => /* @__PURE__ */ e("tbody", { children: t }),
-  tr: ({ children: t }) => /* @__PURE__ */ e("tr", { className: "m-0 border-t p-0 even:bg-muted", children: t }),
+  tr: ({ children: t }) => /* @__PURE__ */ e("tr", { className: "m-0 border-t p-0 even:bg-muted-background", children: t }),
   th: ({ children: t }) => /* @__PURE__ */ e("th", { className: "border px-4 py-2 text-left font-bold", children: t }),
   td: ({ children: t }) => /* @__PURE__ */ e("td", { className: "border px-4 py-2 text-left", children: t })
-}, x = b(
-  ({ className: t, components: o, plugins: a, ...r }) => /* @__PURE__ */ e(
+}, h = b(
+  ({
+    className: t,
+    components: o,
+    plugins: a,
+    controls: r,
+    ...s
+  }) => /* @__PURE__ */ e(
     p,
     {
       "data-slot": "message-response",
@@ -129,7 +145,7 @@ const k = {
         // Inline code
         "[&_code]:relative",
         "[&_code]:rounded",
-        "[&_code]:bg-muted",
+        "[&_code]:bg-muted-background",
         "[&_code]:px-[0.3rem]",
         "[&_code]:py-[0.2rem]",
         "[&_code]:font-mono",
@@ -146,7 +162,7 @@ const k = {
         '[&_div[data-streamdown="code-block-header"]]:flex',
         '[&_div[data-streamdown="code-block-header"]]:items-center',
         '[&_div[data-streamdown="code-block-header"]]:justify-between',
-        '[&_div[data-streamdown="code-block-header"]]:bg-muted/80',
+        '[&_div[data-streamdown="code-block-header"]]:bg-muted-background/80',
         '[&_div[data-streamdown="code-block-header"]]:px-4',
         '[&_div[data-streamdown="code-block-header"]]:py-3',
         '[&_div[data-streamdown="code-block-header"]]:text-xs',
@@ -185,7 +201,7 @@ const k = {
         "[&_pre:not([data-streamdown])]:overflow-x-auto",
         "[&_pre:not([data-streamdown])]:rounded-md",
         "[&_pre:not([data-streamdown])]:border",
-        "[&_pre:not([data-streamdown])]:bg-card",
+        "[&_pre:not([data-streamdown])]:bg-card-background",
         "[&_pre:not([data-streamdown])]:p-4",
         "[&_pre:not([data-streamdown])]:text-foreground",
         "[&_pre:not([data-streamdown])]:text-sm",
@@ -198,41 +214,43 @@ const k = {
         "[&_pre:not([data-streamdown])_code]:text-sm",
         "[&_pre:not([data-streamdown])_code]:font-normal",
         // Mermaid diagram blocks
-        '[&_div[data-streamdown="mermaid-block"]]:bg-card',
-        '[&_div[data-streamdown="mermaid-block"]]:text-card-foreground',
+        '[&_div[data-streamdown="mermaid-block"]]:bg-card-background',
+        '[&_div[data-streamdown="mermaid-block"]]:text-foreground',
         '[&_div[data-streamdown="mermaid-block"]]:flex',
         '[&_div[data-streamdown="mermaid-block"]]:flex-col',
         '[&_div[data-streamdown="mermaid-block"]]:rounded-lg',
-        '[&_div[data-streamdown="mermaid-block"]]:hover:bg-accent',
+        '[&_div[data-streamdown="mermaid-block"]]:hover:bg-accent-background',
         '[&_div[data-streamdown="mermaid-block"]]:border-0',
-        // Ensure mermaid container is tall enough for the toolbar
+        // Positioning context for the action strip (see below)
+        '[&_div[data-streamdown="mermaid-block"]]:relative',
+        // Nested scroll + sticky + pointer-events breaks hit-testing on Mermaid Copy/Download
+        // (same class of issue as github.com/vercel/streamdown/issues/494). Force absolute strip.
+        '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!absolute',
+        '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!top-2',
+        '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!right-2',
+        '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!z-10',
+        '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!mt-0',
+        '[&_div[data-streamdown="mermaid-block"]>div:has([data-streamdown="mermaid-block-actions"])]:!pointer-events-auto',
+        // Ensure mermaid container is tall enough for the toolbar (pan/zoom + actions)
         '[&_div[data-streamdown="mermaid-block"]_.relative.w-full]:!min-h-28',
-        // Mermaid fullscreen overlay: boost z-index above eos footer (z-150)
-        '[&_div[data-streamdown="mermaid-block"]_>div>.fixed]:!z-[200]',
-        // Mermaid fullscreen toolbar: pin to viewport top-left (only in fullscreen via .inset-0)
-        '[&_div[data-streamdown="mermaid-block"]_.fixed.inset-0_.flex-col.absolute]:!fixed',
-        '[&_div[data-streamdown="mermaid-block"]_.fixed.inset-0_.flex-col.absolute]:!top-4',
-        '[&_div[data-streamdown="mermaid-block"]_.fixed.inset-0_.flex-col.absolute]:!bottom-auto',
-        '[&_div[data-streamdown="mermaid-block"]_.fixed.inset-0_.flex-col.absolute]:!right-auto',
-        '[&_div[data-streamdown="mermaid-block"]_.fixed.inset-0_.flex-col.absolute]:!left-4',
         // First and last child margin resets
         "[&>*:first-child]:mt-0",
         "[&>*:last-child]:mb-0",
         t
       ),
-      components: { ...k, ...o },
-      controls: !1,
+      components: { ...f, ...o },
+      controls: r ?? v,
       plugins: { ...a, mermaid: _ },
-      ...r
+      ...s
     }
   ),
   (t, o) => t.children === o.children
 );
-x.displayName = "MessageResponse";
+h.displayName = "MessageResponse";
 export {
-  z as Message,
-  S as MessageAction,
-  B as MessageActions,
-  A as MessageContent,
-  x as MessageResponse
+  q as Message,
+  D as MessageAction,
+  z as MessageActions,
+  O as MessageContent,
+  h as MessageResponse
 };

package/dist/components/ui/core/popover/popover.d.ts

@@ -4,5 +4,14 @@ declare namespace Popover {
     var displayName: string;
 }
 declare function PopoverTrigger({ children, ...props }: PopoverPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare const PopoverHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const PopoverHeaderContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const PopoverTitle: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
+declare const PopoverDescription: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
+declare const PopoverSlot: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ButtonProps & import('class-variance-authority').VariantProps<(props?: ({
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
 declare const PopoverContent: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverPopupProps & Pick<import('@base-ui/react').PopoverPositionerProps, "align" | "alignOffset" | "side" | "sideOffset">, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverHeaderContent, PopoverSlot, PopoverTitle, PopoverTrigger, };