@cognite/aura 0.1.5 → 0.1.7

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

@@ -1,146 +1,267 @@
-import { jsx as o, jsxs as z } from "react/jsx-runtime";
-import { createContext as E, forwardRef as y, useState as C, useMemo as T, useEffect as M, useContext as N } from "react";
-import { IconCheck as j, IconCopy as P, IconSelector as $ } from "@tabler/icons-react";
-import { isStorybookTestEnv as f, highlightCode as A, cn as d } from "../../../../lib/utils.js";
-import { Button as _ } from "../button/button.js";
-const g = E({
+import { jsxs as L, jsx as r } from "react/jsx-runtime";
+import { createContext as F, forwardRef as w, useState as x, useMemo as D, useEffect as O, useContext as H } from "react";
+import { IconCheck as K, IconCopy as V, IconSelector as $, IconDownload as q } from "@tabler/icons-react";
+import { isStorybookTestEnv as v, highlightCode as M, cn as f } from "../../../../lib/utils.js";
+import { Button as S } from "../button/button.js";
+const I = F({
   code: "",
   copyText: "",
   isCollapsed: !1,
   setIsCollapsed: () => {
   },
   lineCount: 0
-}), D = y(
+}), P = (e) => e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;"), E = 14, N = 8e3, W = 400, G = 16384;
+function J(e) {
+  const t = e.split(`
+`);
+  let n = !1, o = t.slice(0, E).join(`
+`);
+  t.length > E && (n = !0), o.length > N && (o = o.slice(0, N), n = !0);
+  const a = o.length === 0 ? " " : o;
+  return n ? `${a}
+…` : a;
+}
+function Q(e) {
+  return e.split(`
+`).length > E || e.length > N;
+}
+function Y(e, t) {
+  return t > W || e.length > G;
+}
+function Z(e) {
+  return `<pre><code>${P(e)}</code></pre>`;
+}
+const ee = "min(60vh, 32rem)", oe = "dark:hidden [&>pre]:m-0 [&>pre]:min-h-10 [&>pre]:bg-card-background [&>pre]:p-2 [&>pre]:text-secondary-foreground [&>pre]:leading-[18px] [&>pre]:tracking-[-0.08px] [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm [&>pre]:overflow-x-auto", te = "hidden dark:block [&>pre]:m-0 [&>pre]:min-h-10 [&>pre]:bg-card-background [&>pre]:p-2 [&>pre]:text-secondary-foreground [&>pre]:leading-[18px] [&>pre]:tracking-[-0.08px] [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm [&>pre]:overflow-x-auto", ne = w(
   ({
     code: e,
     copyText: t,
-    language: r,
-    showLineNumbers: l = !1,
-    collapsed: s = !1,
-    className: c,
-    children: n,
-    ...h
-  }, p) => {
-    const [k, m] = C(""), [b, a] = C(""), [i, H] = C(s), w = e.split(`
-`).length, B = t ?? e, I = T(
-      () => f ? `<pre><code>${e}</code></pre>` : "",
-      [e]
+    language: n,
+    showLineNumbers: o = !1,
+    collapsed: a = !1,
+    className: h,
+    children: i,
+    style: C,
+    ...k
+  }, b) => {
+    const [d, p] = x(""), [c, _] = x(""), [l, R] = x(a), s = e.length === 0 ? " " : e, y = e.split(`
+`).length, A = t ?? e, T = D(
+      () => v ? `<pre><code>${P(s)}</code></pre>` : "",
+      [s]
     );
-    M(() => {
-      if (f) return;
-      let v = !1;
-      return A(e, r, l).then(([x, u]) => {
-        v || (m(x), a(u));
-      }).catch((x) => {
-        if (console.error("Failed to highlight code:", x), !v) {
-          const u = `<pre><code>${e}</code></pre>`;
-          m(u), a(u);
+    O(() => {
+      if (v) return;
+      let g = !1;
+      const B = (u) => {
+        if (!g) {
+          const m = Z(u);
+          p(m), _(m);
         }
-      }), () => {
-        v = !0;
       };
-    }, [e, r, l]);
-    const S = T(
+      if (l && Q(s)) {
+        const u = J(s);
+        return M(u, n, o).then(([m, j]) => {
+          g || (p(m), _(j));
+        }).catch((m) => {
+          console.error("Failed to highlight code:", m), B(u);
+        }), () => {
+          g = !0;
+        };
+      }
+      return !l && Y(s, y) ? (queueMicrotask(() => {
+        B(s);
+      }), () => {
+        g = !0;
+      }) : (M(s, n, o).then(([u, m]) => {
+        g || (p(u), _(m));
+      }).catch((u) => {
+        console.error("Failed to highlight code:", u), B(s);
+      }), () => {
+        g = !0;
+      });
+    }, [s, n, o, l, y]);
+    const z = D(
       () => ({
         code: e,
-        copyText: B,
-        isCollapsed: i,
-        setIsCollapsed: H,
-        lineCount: w
+        copyText: A,
+        isCollapsed: l,
+        setIsCollapsed: R,
+        lineCount: y
       }),
-      [e, B, i, w]
-    );
-    return /* @__PURE__ */ o(g.Provider, { value: S, children: /* @__PURE__ */ o(
+      [e, A, l, y]
+    ), U = /* @__PURE__ */ L("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: f(
+            oe,
+            l && "max-h-26 overflow-y-hidden"
+          ),
+          dangerouslySetInnerHTML: {
+            __html: v ? T : d
+          }
+        }
+      ),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: f(
+            te,
+            l && "max-h-26 overflow-y-hidden"
+          ),
+          dangerouslySetInnerHTML: {
+            __html: v ? T : c
+          }
+        }
+      ),
+      l && /* @__PURE__ */ r("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 h-3/4 bg-linear-to-b from-transparent via-card-background/70 to-card-background" })
+    ] }), X = i != null ? /* @__PURE__ */ r(
       "div",
       {
-        ref: p,
-        "data-slot": "code-block",
-        className: d(
-          "group/code-block relative w-full overflow-hidden rounded-md bg-background text-foreground",
-          c
+        "data-slot": "code-block-actions",
+        className: f(
+          /* Sibling of scroll inner: pinned while code scrolls; even inset from top/right (scrollbar gutter on inner) */
+          "pointer-events-none absolute top-5 right-5 z-20 flex items-center gap-1 bg-transparent p-0 shadow-none ring-0 outline-none",
+          "opacity-0 transition-opacity",
+          "group-hover/code-block:pointer-events-auto group-hover/code-block:opacity-100",
+          "group-focus-within/code-block:pointer-events-auto group-focus-within/code-block:opacity-100",
+          v && "pointer-events-auto opacity-100"
         ),
-        ...h,
-        children: /* @__PURE__ */ z("div", { className: "relative", children: [
-          /* @__PURE__ */ o(
-            "div",
-            {
-              className: d(
-                "dark:hidden [&>pre]:m-0 [&>pre]:bg-card [&>pre]:p-4 [&>pre]:text-foreground [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm [&>pre]:overflow-x-auto",
-                i && "max-h-26 overflow-y-hidden"
-              ),
-              dangerouslySetInnerHTML: {
-                __html: f ? I : k
-              }
-            }
+        children: i
+      }
+    ) : null;
+    return /* @__PURE__ */ r(I.Provider, { value: z, children: /* @__PURE__ */ L(
+      "div",
+      {
+        ref: b,
+        "data-slot": "code-block",
+        className: f(
+          "group/code-block relative w-full rounded-xl bg-background text-foreground",
+          l ? "overflow-hidden" : (
+            /* Expanded: flex + clip so actions overlay without a reserved top row */
+            "flex min-h-0 max-h-[min(60vh,_32rem)] flex-col overflow-hidden"
           ),
-          /* @__PURE__ */ o(
+          h
+        ),
+        style: {
+          ...l ? {} : {
+            maxHeight: ee,
+            minHeight: 0
+          },
+          ...C
+        },
+        ...k,
+        children: [
+          /* @__PURE__ */ r(
             "div",
             {
-              className: d(
-                "hidden dark:block [&>pre]:m-0 [&>pre]:bg-card [&>pre]:p-4 [&>pre]:text-foreground [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm [&>pre]:overflow-x-auto",
-                i && "max-h-26 overflow-y-hidden"
+              className: f(
+                /* Match <pre> card tone so transparent actions are not over root bg-background */
+                "relative min-h-0 bg-card-background",
+                !l && "min-h-0 flex-1 overflow-x-auto overflow-y-auto [scrollbar-gutter:stable]"
               ),
-              dangerouslySetInnerHTML: {
-                __html: f ? I : b
-              }
+              children: U
             }
           ),
-          i && /* @__PURE__ */ o("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 h-3/4 bg-linear-to-b from-transparent via-card/70 to-card" }),
-          n && /* @__PURE__ */ o("div", { className: "absolute top-2 right-2 hidden items-center gap-2 group-hover/code-block:flex", children: n })
-        ] })
+          X
+        ]
       }
     ) });
   }
 );
-D.displayName = "CodeBlock";
-const F = y(({ onCopy: e, onError: t, timeout: r = 2e3, children: l, className: s, ...c }, n) => {
-  const [h, p] = C(!1), { copyText: k } = N(g), m = async () => {
+ne.displayName = "CodeBlock";
+const re = w(({ onCopy: e, onError: t, timeout: n = 2e3, children: o, className: a, ...h }, i) => {
+  const [C, k] = x(!1), { copyText: b } = H(I), d = async () => {
     if (typeof window > "u" || !navigator?.clipboard?.writeText) {
       t?.(new Error("Clipboard API not available"));
       return;
     }
     try {
-      await navigator.clipboard.writeText(k), p(!0), e?.(), setTimeout(() => p(!1), r);
-    } catch (a) {
-      console.warn("Clipboard write failed:", a), t?.(
-        a instanceof Error ? a : new Error("Clipboard write failed")
+      await navigator.clipboard.writeText(b), k(!0), e?.(), setTimeout(() => k(!1), n);
+    } catch (c) {
+      console.warn("Clipboard write failed:", c), t?.(
+        c instanceof Error ? c : new Error("Clipboard write failed")
       );
     }
-  }, b = h ? j : P;
-  return /* @__PURE__ */ o(
-    _,
+  }, p = C ? K : V;
+  return /* @__PURE__ */ r(
+    S,
     {
-      ref: n,
+      ref: i,
       "data-slot": "code-block-copy-button",
-      className: d("shrink-0", s),
-      onClick: m,
-      size: "icon",
+      className: f("shrink-0", a),
+      onClick: d,
+      size: "icon-sm",
       variant: "secondary",
-      ...c,
-      children: l ?? /* @__PURE__ */ o(b, { size: 14 })
+      ...h,
+      children: o ?? /* @__PURE__ */ r(p, { size: 14 })
     }
   );
 });
-F.displayName = "CodeBlockCopyButton";
-const L = y(({ children: e, className: t, ...r }, l) => {
-  const { isCollapsed: s, setIsCollapsed: c, lineCount: n } = N(g);
-  return n <= 1 ? null : /* @__PURE__ */ o(
-    _,
+re.displayName = "CodeBlockCopyButton";
+const le = w(({ children: e, className: t, ...n }, o) => {
+  const { isCollapsed: a, setIsCollapsed: h, lineCount: i } = H(I);
+  return i <= 1 ? null : /* @__PURE__ */ r(
+    S,
     {
-      ref: l,
+      ref: o,
       "data-slot": "code-block-collapse-button",
-      className: d("shrink-0", t),
-      onClick: () => c(!s),
-      size: "icon",
+      className: f("shrink-0", t),
+      onClick: () => h(!a),
+      size: "icon-sm",
       variant: "secondary",
-      ...r,
-      children: e ?? /* @__PURE__ */ o($, { size: 14 })
+      ...n,
+      children: e ?? /* @__PURE__ */ r($, { size: 14 })
     }
   );
 });
-L.displayName = "CodeBlockCollapseButton";
+le.displayName = "CodeBlockCollapseButton";
+const ae = w(
+  ({
+    fileName: e = "code.txt",
+    mimeType: t = "text/plain;charset=utf-8",
+    onDownload: n,
+    onError: o,
+    children: a,
+    className: h,
+    ...i
+  }, C) => {
+    const { code: k } = H(I), b = () => {
+      if (typeof window > "u" || typeof document > "u") {
+        o?.(new Error("Download not available"));
+        return;
+      }
+      try {
+        const d = new Blob([k], { type: t }), p = URL.createObjectURL(d), c = document.createElement("a");
+        c.href = p, c.download = e, c.rel = "noopener", c.click(), URL.revokeObjectURL(p), n?.();
+      } catch (d) {
+        o?.(
+          d instanceof Error ? d : new Error("Download failed")
+        );
+      }
+    };
+    return /* @__PURE__ */ r(
+      S,
+      {
+        ref: C,
+        "data-slot": "code-block-download-button",
+        className: f("shrink-0", h),
+        onClick: b,
+        size: "icon-sm",
+        variant: "secondary",
+        ...i,
+        children: a ?? /* @__PURE__ */ r(q, { size: 14 })
+      }
+    );
+  }
+);
+ae.displayName = "CodeBlockDownloadButton";
 export {
-  D as CodeBlock,
-  L as CodeBlockCollapseButton,
-  F as CodeBlockCopyButton
+  ne as CodeBlock,
+  le as CodeBlockCollapseButton,
+  re as CodeBlockCopyButton,
+  ae as CodeBlockDownloadButton,
+  J as getCollapsedPreviewDisplay,
+  Q as isContentLargerThanPreview,
+  Z as plainPreMarkup,
+  Y as shouldUsePlainTextInsteadOfShiki
 };

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

@@ -1,7 +1,7 @@
 const o = {
   name: "CodeBlock",
   status: "in-progress-code-review",
-  description: "A syntax-highlighted code block with copy and collapse functionality."
+  description: "A syntax-highlighted code block with copy, download and collapse functionality."
 };
 export {
   o as CodeBlockMetadata

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

@@ -1,44 +1,50 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import { Collapsible as i } from "@base-ui/react/collapsible";
-import { cn as s } from "../../../../lib/utils.js";
-const n = t(({ className: l, ...e }, o) => /* @__PURE__ */ a(
-  i.Root,
+import { Collapsible as n } from "@base-ui/react/collapsible";
+import { cn as i } from "../../../../lib/utils.js";
+const s = t(({ className: l, ...o }, e) => /* @__PURE__ */ a(
+  n.Root,
   {
-    ref: o,
+    ref: e,
     "data-slot": "collapsible",
-    className: s("w-full min-w-0 box-border *:max-w-full", l),
-    ...e
+    className: i(
+      "w-full min-w-0 rounded-md box-border *:max-w-full",
+      l
+    ),
+    ...o
   }
 ));
-n.displayName = "Collapsible";
-const p = t(({ className: l, children: e, ...o }, r) => /* @__PURE__ */ a(
-  i.Trigger,
+s.displayName = "Collapsible";
+const d = t(({ className: l, children: o, ...e }, r) => /* @__PURE__ */ a(
+  n.Trigger,
   {
     ref: r,
     "data-slot": "collapsible-trigger",
-    className: s("group/collapsible-trigger text-base", l),
-    ...o,
-    children: e
+    className: i(
+      "group/collapsible-trigger rounded-lg text-sm font-medium leading-5 text-foreground overflow-hidden",
+      l
+    ),
+    ...e,
+    children: o
   }
 ));
-p.displayName = "CollapsibleTrigger";
-const b = t(({ className: l, keepMounted: e = !0, ...o }, r) => /* @__PURE__ */ a(
-  i.Panel,
+d.displayName = "CollapsibleTrigger";
+const m = t(({ className: l, keepMounted: o = !0, ...e }, r) => /* @__PURE__ */ a(
+  n.Panel,
   {
     ref: r,
     "data-slot": "collapsible-content",
-    className: s(
-      "hidden data-open:block border-none outline-none text-muted-foreground text-sm leading-4.5 tracking-tight w-full min-w-0 overflow-x-hidden box-border *:max-w-full *:box-border",
+    className: i(
+      "hidden data-open:block border-none outline-none text-secondary-foreground text-sm font-normal leading-5 tracking-tight w-full min-w-0 overflow-x-hidden box-border *:max-w-full *:box-border",
       l
     ),
-    keepMounted: e,
-    ...o
+    keepMounted: o,
+    ...e
   }
 ));
-b.displayName = "CollapsibleContent";
+m.displayName = "CollapsibleContent";
 export {
-  n as Collapsible,
-  b as CollapsibleContent,
-  p as CollapsibleTrigger
+  s as Collapsible,
+  m as CollapsibleContent,
+  d as CollapsibleTrigger
 };

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

@@ -31,7 +31,7 @@ declare const CommandInput: import('react').ForwardRefExoticComponent<Omit<Omit<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
+}, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & import('react').RefAttributes<HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
@@ -75,7 +75,7 @@ declare const CommandItem: import('react').ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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

@@ -4,23 +4,23 @@ import { IconSearch as p } from "@tabler/icons-react";
 import { Command as r } from "cmdk";
 import { cn as m } from "../../../../lib/utils.js";
 import { Dialog as u, DialogHeader as g, DialogTitle as h, DialogDescription as f, DialogContent as x } from "../dialog/dialog.js";
-const s = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const s = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
   r,
   {
-    ref: a,
+    ref: t,
     "data-slot": "command",
     className: m(
       "rounded-lg bg-background text-muted-foreground flex h-full w-full flex-col overflow-hidden",
       e
     ),
-    ...t
+    ...a
   }
 ));
 s.displayName = "Command";
 function y({
   title: e = "Command Palette",
-  description: t = "Search for a command to run...",
-  children: a,
+  description: a = "Search for a command to run...",
+  children: t,
   className: l,
   showCloseButton: c = !0,
   ...i
@@ -28,7 +28,7 @@ function y({
   return /* @__PURE__ */ n(u, { ...i, children: [
     /* @__PURE__ */ n(g, { className: "sr-only rounded-lg", children: [
       /* @__PURE__ */ o(h, { children: e }),
-      /* @__PURE__ */ o(f, { children: t })
+      /* @__PURE__ */ o(f, { children: a })
     ] }),
     /* @__PURE__ */ o(
       x,
@@ -36,13 +36,13 @@ function y({
         "data-slot": "command-dialog",
         className: m("overflow-hidden p-0", l),
         showCloseButton: c,
-        children: /* @__PURE__ */ o(s, { className: "**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: a })
+        children: /* @__PURE__ */ o(s, { className: "**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: t })
       }
     )
   ] });
 }
 y.displayName = "CommandDialog";
-const k = d(({ className: e, ...t }, a) => /* @__PURE__ */ n(
+const k = d(({ className: e, ...a }, t) => /* @__PURE__ */ n(
   "div",
   {
     "data-slot": "command-input-wrapper",
@@ -52,88 +52,88 @@ const k = d(({ className: e, ...t }, a) => /* @__PURE__ */ n(
       /* @__PURE__ */ o(
         r.Input,
         {
-          ref: a,
+          ref: t,
           "data-slot": "command-input",
           className: m(
             "placeholder:text-muted-foreground flex h-10 w-full rounded-lg bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
             e
           ),
-          ...t
+          ...a
         }
       )
     ]
   }
 ));
 k.displayName = "CommandInput";
-const C = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const C = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
   r.List,
   {
-    ref: a,
+    ref: t,
     "data-slot": "command-list",
     className: m(
       "max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto",
       e
     ),
-    ...t
+    ...a
   }
 ));
 C.displayName = "CommandList";
-const N = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const N = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
   r.Empty,
   {
-    ref: a,
+    ref: t,
     "data-slot": "command-empty",
     className: m("py-6 text-center text-sm", e),
-    ...t
+    ...a
   }
 ));
 N.displayName = "CommandEmpty";
-const v = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const v = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
   r.Group,
   {
-    ref: a,
+    ref: t,
     "data-slot": "command-group",
     className: m(
-      "text-popover-foreground font-normal **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-medium",
+      "text-foreground font-normal **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-medium",
       e
     ),
-    ...t
+    ...a
   }
 ));
 v.displayName = "CommandGroup";
-const w = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const w = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
   r.Separator,
   {
-    ref: a,
+    ref: t,
     "data-slot": "command-separator",
     className: m("bg-border -mx-1 h-px", e),
-    ...t
+    ...a
   }
 ));
 w.displayName = "CommandSeparator";
-const _ = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const _ = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
   r.Item,
   {
-    ref: a,
+    ref: t,
     "data-slot": "command-item",
     className: m(
-      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "data-[selected=true]:bg-accent-background data-[selected=true]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       e
     ),
-    ...t
+    ...a
   }
 ));
 _.displayName = "CommandItem";
-const b = d(({ className: e, ...t }, a) => /* @__PURE__ */ o(
+const b = d(({ className: e, ...a }, t) => /* @__PURE__ */ o(
   "span",
   {
-    ref: a,
+    ref: t,
     "data-slot": "command-shortcut",
     className: m(
       "text-muted-foreground ml-auto text-xs tracking-widest",
       e
     ),
-    ...t
+    ...a
   }
 ));
 b.displayName = "CommandShortcut";