impact-nova 1.6.6 → 1.7.0

package/README.md

@@ -11,6 +11,9 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg?style=flat&logo=typescript)](https://www.typescriptlang.org/)
 [![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.4-38b2ac.svg?style=flat&logo=tailwind-css)](https://tailwindcss.com/)
 [![Radix UI](https://img.shields.io/badge/Radix%20UI-Primitives-white?style=flat&logo=radix-ui)](https://www.radix-ui.com/)
+[![Internationalization](https://img.shields.io/badge/i18n-Built--in-059669.svg?style=flat)](#internationalization-i18n)
+[![Documentation](https://img.shields.io/badge/Documentation-online-FF4785?style=flat&logo=storybook&logoColor=white)](https://impact-nova.iaproducts.ai/)
+[![npm impact-nova-mcp](https://img.shields.io/npm/v/impact-nova-mcp?label=impact-nova-mcp&logo=npm)](https://www.npmjs.com/package/impact-nova-mcp)
 
 </div>
 
@@ -38,6 +41,20 @@ Impact Nova is built upon four core pillars that guide every component applicati
 
 ---
 
+## 📚 Documentation
+
+Visit **[https://impact-nova.iaproducts.ai/](https://impact-nova.iaproducts.ai/)** to view the full documentation: component reference, interactive **React** examples, props and controls, and usage notes—all in the browser, with no local checkout required.
+
+That documentation site is published with **Storybook** ([storybook.js.org](https://storybook.js.org/)), the same format many design systems use; you can treat the URL like any other docs hub even if you are not familiar with Storybook.
+
+### MCP server (`impact-nova-mcp`)
+
+Use **[impact-nova-mcp on npm](https://www.npmjs.com/package/impact-nova-mcp)** if you want a **Model Context Protocol** (MCP) server for Impact Nova in **Cursor**, **Windsurf**, **Claude**, **Antigravity**, or other MCP-capable clients—component lists, specs, design tokens, codegen, and conventions wired for assistants.
+
+What MCP is, what this server exposes, and how to install and configure your editor are documented in **[packages/mcp/README.md](packages/mcp/README.md)** in this repository.
+
+---
+
 ## 🚀 Getting Started
 
 Everything you need to install, configure, and start building with **Impact Nova**.
@@ -54,7 +71,7 @@ pnpm add impact-nova
 yarn add impact-nova
 ```
 
-> **Note on Peer Dependencies**: 
+> **Note on Peer Dependencies**:
 > You must also ensure `react`, `react-dom`, `ag-grid-react`, `ag-grid-enterprise`, and `highcharts` (if used) are installed in your project, as these are peer dependencies.
 
 ### Styles & Configuration
@@ -62,17 +79,15 @@ yarn add impact-nova
 Import the bundled CSS in your root entry file (e.g., `main.tsx`, `App.tsx`, or `layout.tsx`).
 
 ```tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 
 // ⚠️ Import styles before your App
-import 'impact-nova/dist/impact-nova.css'; 
+import "impact-nova/dist/impact-nova.css";
 
-import App from './App';
+import App from "./App";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <App />
-);
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 ```
 
 ### Typography
@@ -80,15 +95,19 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 Impact Nova looks best with **Manrope**. We recommend adding it to your project:
 
 1.  **Import Font**:
+
     ```html
-    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"
+      rel="stylesheet"
+    />
     ```
 
 2.  **Configure Tailwind**:
     ```css
     @layer base {
       body {
-        font-family: 'Manrope', sans-serif;
+        font-family: "Manrope", sans-serif;
       }
     }
     ```
@@ -102,7 +121,7 @@ Import components directly from the package. All components export strong TypeSc
 ### Core Components
 
 ```tsx
-import { Button, Card, DatePicker } from 'impact-nova';
+import { Button, Card, DatePicker } from "impact-nova";
 
 export default function MyPage() {
   return (
@@ -122,7 +141,7 @@ export default function MyPage() {
 Impact Nova includes a custom-built icon library. Icons are treeshakeable and accept standard SVG props.
 
 ```tsx
-import { Icons } from 'impact-nova';
+import { Icons } from "impact-nova";
 
 export function StatusBadge() {
   return (
@@ -139,7 +158,7 @@ export function StatusBadge() {
 You can import component props to ensure type safety in your own interfaces.
 
 ```tsx
-import { Button, type ButtonProps } from 'impact-nova';
+import { Button, type ButtonProps } from "impact-nova";
 
 interface CustomActionProps extends ButtonProps {
   analyticsId: string;
@@ -157,7 +176,7 @@ Impact Nova supports multiple languages via a provider and message overrides. Wr
 **Locale packs** (German, Spanish, Hindi, Kannada) are exported so you can use them as-is or override only the strings you need:
 
 ```tsx
-import { ImpactNovaI18nProvider, de, defaultMessages } from 'impact-nova';
+import { ImpactNovaI18nProvider, de, defaultMessages } from "impact-nova";
 
 // Use a full locale pack as-is
 function App() {
@@ -172,25 +191,25 @@ function App() {
 **Override only a few keys** by spreading a locale pack and then overriding specific sections or keys. The provider merges your `messages` over the built-in English defaults (or over the pack you pass), so you only need to provide the keys you want to change:
 
 ```tsx
-import { ImpactNovaI18nProvider, de } from 'impact-nova';
+import { ImpactNovaI18nProvider, de } from "impact-nova";
 
 // German with custom labels for calendar only
 const messages = {
   ...de,
-  calendar: { ...de.calendar, apply: 'Übernehmen', cancel: 'Schließen' },
+  calendar: { ...de.calendar, apply: "Übernehmen", cancel: "Schließen" },
 };
 
 <ImpactNovaI18nProvider locale="de" messages={messages}>
   <MyApp />
-</ImpactNovaI18nProvider>
+</ImpactNovaI18nProvider>;
 ```
 
 **Tree-shakeable locale imports** (if you only need one language and want to avoid pulling others into your bundle):
 
 ```tsx
-import { de } from 'impact-nova/locale/de';
+import { de } from "impact-nova/locale/de";
 // or
-import { de, es, hi, kn } from 'impact-nova/locale';
+import { de, es, hi, kn } from "impact-nova/locale";
 ```
 
 - **`locale`**: BCP 47 code (e.g. `'en'`, `'de'`) used for date/number formatting. Supported: `en`, `en-US`, `en-GB`, `de`, `es`, `hi`, `kn`.
@@ -216,6 +235,7 @@ The library utilizes a modern, headless architecture pattern:
 Impact Nova provides a rich set of components structured for any enterprise use-case.
 
 ### 📝 Forms & Inputs
+
 - Button, Button Group
 - Checkbox, Radio Group, Switch
 - Input, Smart Input, Textarea
@@ -226,6 +246,7 @@ Impact Nova provides a rich set of components structured for any enterprise use-
 - Prompt, Form Group
 
 ### 🧭 Navigation
+
 - Sidebar, Navigation Bar
 - Tabs, Breadcrumb, Stepper
 - Card, Accordion, Nested List
@@ -233,6 +254,7 @@ Impact Nova provides a rich set of components structured for any enterprise use-
 - Dynamic Layout
 
 ### 💬 Feedback & Overlay
+
 - Alert, Alert Dialog, Dialog
 - Sheet, Drawer, Modal
 - Toast, Tooltip, Popover
@@ -240,6 +262,7 @@ Impact Nova provides a rich set of components structured for any enterprise use-
 - Loader, Skeleton, Progress Bar
 
 ### 📊 Data Display
+
 - Avatar, Badge, Tag, Chips
 - Calendar, Chart
 - Empty Container, Notification Panel
@@ -258,22 +281,30 @@ Impact Nova provides a rich set of components structured for any enterprise use-
 ## ✨ Credits & Contributors
 
 **Core Development**
+
 - Anil M
 - Ritesh Ranjan
+- Manohar R
+- Pratik Pradhan
+- Balaji Utukuri
 
 **Design Architecture**
+
 - Jaymin Pancholi
 - Sudip Sarkar
 
 **UX & Product UI**
+
 - Kalyan
 - Vikram
 - Aditi Chaudhary
 
 **Inspiration**
+
 - Impact UI
 
 **Special Thanks**
+
 - Girish Pattana Setty
 - Himanshu K
 - Harish V
@@ -283,4 +314,3 @@ Impact Nova provides a rich set of components structured for any enterprise use-
 ## 📄 License
 
 Impact Nova is licensed under the [MIT License](LICENSE).
-

package/dist/components/ui/command-palette/command-palette.d.ts

@@ -11,7 +11,7 @@ import { CommandDefinition, KeyBinding } from './utils';
  *   CommandPaletteGroup, CommandPaletteItem, CommandPaletteShortcut,
  *   CommandPaletteEmpty, CommandPaletteSeparator, CommandPaletteFooter
  */
-import * as React from 'react';
+import * as React from "react";
 interface CommandPaletteLabels {
     /** Placeholder text for the search input */
     placeholder?: string;
@@ -46,7 +46,7 @@ declare function CommandPalette({ className, children, commands: externalCommand
 declare namespace CommandPalette {
     var displayName: string;
 }
-export interface CommandPaletteInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+export interface CommandPaletteInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     onValueChange?: (value: string) => void;
 }
 declare const CommandPaletteInput: React.ForwardRefExoticComponent<CommandPaletteInputProps & React.RefAttributes<HTMLInputElement>>;
@@ -55,7 +55,7 @@ export interface CommandPaletteGroupProps extends React.HTMLAttributes<HTMLDivEl
     heading?: string;
 }
 declare const CommandPaletteGroup: React.ForwardRefExoticComponent<CommandPaletteGroupProps & React.RefAttributes<HTMLDivElement>>;
-export interface CommandPaletteItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface CommandPaletteItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
     command: CommandDefinition;
     isSelected?: boolean;
     onSelect?: () => void;

package/dist/components/ui/command-palette/command-palette.js

@@ -38,7 +38,13 @@ function fe({
   onCommandExecute: O,
   onOpenChange: W
 }) {
-  const { open: E, setOpen: Y, getPaletteCommands: Z, getEffectiveKeybinding: G, registry: k } = ie(), [y, $] = r.useState(""), [N, g] = r.useState(0), A = r.useRef(null), F = r.useRef(null), j = r.useMemo(() => (n ?? Z()).filter((s) => {
+  const {
+    open: E,
+    setOpen: Y,
+    getPaletteCommands: Z,
+    getEffectiveKeybinding: G,
+    registry: k
+  } = ie(), [y, $] = r.useState(""), [N, g] = r.useState(0), A = r.useRef(null), F = r.useRef(null), j = r.useMemo(() => (n ?? Z()).filter((s) => {
     const u = s.source ?? "user";
     return u === "user" || u === "ag-grid";
   }), [n, E]), q = r.useMemo(() => {
@@ -51,7 +57,9 @@ function fe({
       const s = k.getRecentCommandIds(), u = new Set(s), x = [], C = [];
       for (const h of t)
         u.has(h.item.id) ? x.push(h) : C.push(h);
-      return x.sort((h, oe) => s.indexOf(h.item.id) - s.indexOf(oe.item.id)), [...x, ...C];
+      return x.sort(
+        (h, oe) => s.indexOf(h.item.id) - s.indexOf(oe.item.id)
+      ), [...x, ...C];
     }
     return t;
   }, [j, y, k]), T = r.useMemo(
@@ -66,7 +74,10 @@ function fe({
       defaultGroupLabel: d
     }),
     [T, y, k, f, d]
-  ), { groups: te, orderedCommands: b } = ee, S = r.useRef({ ordered: b, index: N });
+  ), { groups: te, orderedCommands: b } = ee, S = r.useRef({
+    ordered: b,
+    index: N
+  });
   S.current = { ordered: b, index: N }, r.useEffect(() => {
     E && ($(""), g(0), requestAnimationFrame(() => {
       A.current?.focus();
@@ -74,9 +85,12 @@ function fe({
   }, [E]);
   const K = (t) => {
     Y(t), W?.(t);
-  }, w = r.useCallback((t) => {
-    t.handler(), k.addRecentCommand(t.id), O?.(t), K(!1);
-  }, [k, O]), ae = r.useCallback(
+  }, w = r.useCallback(
+    (t) => {
+      t.handler(), k.addRecentCommand(t.id), O?.(t), K(!1);
+    },
+    [k, O]
+  ), ae = r.useCallback(
     (t) => {
       const { ordered: s } = S.current, u = Math.max(s.length - 1, 0);
       switch (t.key) {
@@ -114,7 +128,9 @@ function fe({
   }, [b.length]), r.useLayoutEffect(() => {
     const t = F.current;
     if (!t) return;
-    const s = t.querySelector('[data-selected="true"]');
+    const s = t.querySelector(
+      '[data-selected="true"]'
+    );
     s && s.scrollIntoView({
       block: "nearest",
       inline: "nearest",
@@ -156,12 +172,7 @@ function fe({
     ]
   ), re = r.Children.count(a) > 0;
   return /* @__PURE__ */ e(P.Root, { open: E, onOpenChange: K, children: /* @__PURE__ */ c(P.Portal, { children: [
-    /* @__PURE__ */ e(
-      P.Overlay,
-      {
-        className: "fixed inset-0 z-50 bg-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-      }
-    ),
+    /* @__PURE__ */ e(P.Overlay, { className: "fixed inset-0 z-50 bg-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
     /* @__PURE__ */ c(
       P.Content,
       {
@@ -184,30 +195,30 @@ function fe({
         children: [
           /* @__PURE__ */ e(P.Title, { className: "sr-only", children: "Command Palette" }),
           /* @__PURE__ */ e(R.Provider, { value: ne, children: re ? a : /* @__PURE__ */ c(se, { children: [
-            /* @__PURE__ */ e(
-              U,
+            /* @__PURE__ */ e(U, { ref: A, placeholder: i }),
+            /* @__PURE__ */ e(_, { ref: F, children: b.length === 0 ? /* @__PURE__ */ e(V, {}) : te.map((t, s) => /* @__PURE__ */ c(
+              r.Fragment,
               {
-                ref: A,
-                placeholder: i
-              }
-            ),
-            /* @__PURE__ */ e(_, { ref: F, children: b.length === 0 ? /* @__PURE__ */ e(V, {}) : te.map((t, s) => /* @__PURE__ */ c(r.Fragment, { children: [
-              s > 0 && /* @__PURE__ */ e(X, {}),
-              /* @__PURE__ */ e(B, { heading: t.heading, children: t.items.map((u, x) => {
-                const C = t.rowStart + x, h = G(u.id);
-                return /* @__PURE__ */ e(
-                  H,
-                  {
-                    command: u,
-                    isSelected: C === N,
-                    onSelect: () => w(u),
-                    onMouseEnter: () => g(C),
-                    keybinding: h
-                  },
-                  u.id
-                );
-              }) })
-            ] }, `${t.heading}-${t.rowStart}`)) }),
+                children: [
+                  s > 0 && /* @__PURE__ */ e(X, {}),
+                  /* @__PURE__ */ e(B, { heading: t.heading, children: t.items.map((u, x) => {
+                    const C = t.rowStart + x, h = G(u.id);
+                    return /* @__PURE__ */ e(
+                      H,
+                      {
+                        command: u,
+                        isSelected: C === N,
+                        onSelect: () => w(u),
+                        onMouseEnter: () => g(C),
+                        keybinding: h
+                      },
+                      u.id
+                    );
+                  }) })
+                ]
+              },
+              `${t.heading}-${t.rowStart}`
+            )) }),
             /* @__PURE__ */ e(J, {})
           ] }) })
         ]
@@ -216,52 +227,50 @@ function fe({
   ] }) });
 }
 fe.displayName = "CommandPalette";
-const U = r.forwardRef(
-  ({ className: o, placeholder: a, onValueChange: n, ...i }, m) => {
-    const { query: p, setQuery: f } = r.useContext(R);
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        className: l(
-          "flex items-center gap-3 border-b border-stroke-hairline px-4",
-          o
+const U = r.forwardRef(({ className: o, placeholder: a, onValueChange: n, ...i }, m) => {
+  const { query: p, setQuery: f } = r.useContext(R);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: l(
+        "flex items-center gap-3 border-b border-stroke-hairline px-4",
+        o
+      ),
+      "data-command-palette-input": !0,
+      children: [
+        /* @__PURE__ */ e(Q, { className: "h-4 w-4 shrink-0 text-content-muted" }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: m,
+            value: p,
+            onChange: (d) => {
+              f(d.target.value), n?.(d.target.value);
+            },
+            placeholder: a,
+            autoComplete: "off",
+            autoCorrect: "off",
+            spellCheck: !1,
+            className: l(
+              "flex h-12 w-full bg-transparent py-3 text-sm font-medium outline-none",
+              "placeholder:text-content-muted"
+            ),
+            ...i
+          }
         ),
-        "data-command-palette-input": !0,
-        children: [
-          /* @__PURE__ */ e(Q, { className: "h-4 w-4 shrink-0 text-content-muted" }),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              ref: m,
-              value: p,
-              onChange: (d) => {
-                f(d.target.value), n?.(d.target.value);
-              },
-              placeholder: a,
-              autoComplete: "off",
-              autoCorrect: "off",
-              spellCheck: !1,
-              className: l(
-                "flex h-12 w-full bg-transparent py-3 text-sm font-medium outline-none",
-                "placeholder:text-content-muted"
-              ),
-              ...i
-            }
-          ),
-          /* @__PURE__ */ e(
-            v,
-            {
-              keybinding: { key: "Escape" },
-              size: "sm",
-              variant: "muted",
-              className: "shrink-0"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+        /* @__PURE__ */ e(
+          v,
+          {
+            keybinding: { key: "Escape" },
+            size: "sm",
+            variant: "muted",
+            className: "shrink-0"
+          }
+        )
+      ]
+    }
+  );
+});
 U.displayName = "CommandPaletteInput";
 const _ = r.forwardRef(({ className: o, children: a, ...n }, i) => /* @__PURE__ */ e(
   "div",
@@ -278,25 +287,26 @@ const _ = r.forwardRef(({ className: o, children: a, ...n }, i) => /* @__PURE__
   }
 ));
 _.displayName = "CommandPaletteList";
-const B = r.forwardRef(
-  ({ className: o, heading: a, children: n, ...i }, m) => /* @__PURE__ */ c(
-    "div",
-    {
-      ref: m,
-      role: "group",
-      "aria-label": a,
-      "data-command-palette-group": !0,
-      className: l("py-1", o),
-      ...i,
-      children: [
-        a && /* @__PURE__ */ e("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-content-muted", children: a }),
-        n
-      ]
-    }
-  )
-);
+const B = r.forwardRef(({ className: o, heading: a, children: n, ...i }, m) => /* @__PURE__ */ c(
+  "div",
+  {
+    ref: m,
+    role: "group",
+    "aria-label": a,
+    "data-command-palette-group": !0,
+    className: l("py-1", o),
+    ...i,
+    children: [
+      a && /* @__PURE__ */ e("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-content-muted", children: a }),
+      n
+    ]
+  }
+));
 B.displayName = "CommandPaletteGroup";
-function xe({ source: o, isSelected: a }) {
+function xe({
+  source: o,
+  isSelected: a
+}) {
   if (!o || o === "user") return null;
   const n = me[o];
   return n ? /* @__PURE__ */ e(
@@ -310,51 +320,80 @@ function xe({ source: o, isSelected: a }) {
     }
   ) : null;
 }
-const H = r.forwardRef(
-  ({ className: o, command: a, isSelected: n, onSelect: i, keybinding: m, ...p }, f) => {
-    const d = pe(a.source);
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        ref: f,
-        role: "option",
-        "aria-selected": n,
-        "data-selected": n,
-        "data-command-palette-item": !0,
-        "data-command-id": a.id,
-        onClick: i,
-        className: l(
-          "flex items-center gap-3 cursor-pointer px-4 py-2 text-sm",
-          // Smooth selection shift; scroll-margin keeps row clear of list edges when scrolling into view
-          "transition-[color,background-color] duration-150 ease-out [scroll-margin-block:6px]",
-          n ? "bg-brand text-brand-foreground" : d ? "text-content-muted hover:bg-canvas-muted" : "text-content-charcoal hover:bg-canvas-muted",
-          o
+const H = r.forwardRef(({ className: o, command: a, isSelected: n, onSelect: i, keybinding: m, ...p }, f) => {
+  const d = pe(a.source);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: f,
+      role: "option",
+      "aria-selected": n,
+      "data-selected": n,
+      "data-command-palette-item": !0,
+      "data-command-id": a.id,
+      onClick: i,
+      className: l(
+        "flex items-center gap-3 cursor-pointer px-4 py-2 text-sm",
+        // Smooth selection shift; scroll-margin keeps row clear of list edges when scrolling into view
+        "transition-[color,background-color] duration-150 ease-out [scroll-margin-block:6px]",
+        n ? "bg-brand text-brand-foreground" : d ? "text-content-muted hover:bg-canvas-muted" : "text-content-charcoal hover:bg-canvas-muted",
+        o
+      ),
+      ...p,
+      children: [
+        a.icon && /* @__PURE__ */ e(
+          "span",
+          {
+            className: l(
+              "flex h-4 w-4 shrink-0 items-center justify-center",
+              n ? "text-brand-foreground" : d ? "text-stroke-hairline" : "text-content-muted"
+            ),
+            children: a.icon
+          }
         ),
-        ...p,
-        children: [
-          a.icon && /* @__PURE__ */ e("span", { className: l(
-            "flex h-4 w-4 shrink-0 items-center justify-center",
-            n ? "text-brand-foreground" : d ? "text-stroke-hairline" : "text-content-muted"
-          ), children: a.icon }),
-          /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col min-w-0", children: [
-            /* @__PURE__ */ e("span", { className: l(
-              "truncate",
-              d && !n ? "font-normal" : "font-medium"
-            ), children: a.label }),
-            a.description && /* @__PURE__ */ e("span", { className: l(
-              "truncate text-xs",
-              n ? "text-brand-foreground/70" : d ? "text-stroke-hairline" : "text-content-muted"
-            ), children: a.description })
-          ] }),
-          /* @__PURE__ */ e(xe, { source: a.source, isSelected: n }),
-          m && /* @__PURE__ */ e(L, { keybinding: m, isSelected: n, external: d })
-        ]
-      }
-    );
-  }
-);
+        /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col min-w-0", children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: l(
+                "truncate",
+                d && !n ? "font-normal" : "font-medium"
+              ),
+              children: a.label
+            }
+          ),
+          a.description && /* @__PURE__ */ e(
+            "span",
+            {
+              className: l(
+                "truncate text-xs",
+                n ? "text-brand-foreground/70" : d ? "text-stroke-hairline" : "text-content-muted"
+              ),
+              children: a.description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(xe, { source: a.source, isSelected: n }),
+        m && /* @__PURE__ */ e(
+          L,
+          {
+            keybinding: m,
+            isSelected: n,
+            external: d
+          }
+        )
+      ]
+    }
+  );
+});
 H.displayName = "CommandPaletteItem";
-function L({ keybinding: o, isSelected: a, external: n, className: i, ...m }) {
+function L({
+  keybinding: o,
+  isSelected: a,
+  external: n,
+  className: i,
+  ...m
+}) {
   const p = ce(o);
   return /* @__PURE__ */ e(
     "span",
@@ -378,7 +417,10 @@ function L({ keybinding: o, isSelected: a, external: n, className: i, ...m }) {
   );
 }
 L.displayName = "CommandPaletteShortcut";
-function V({ className: o, ...a }) {
+function V({
+  className: o,
+  ...a
+}) {
   const { emptyTitle: n, emptyDescription: i } = r.useContext(R);
   return /* @__PURE__ */ c(
     "div",
@@ -398,7 +440,10 @@ function V({ className: o, ...a }) {
   );
 }
 V.displayName = "CommandPaletteEmpty";
-function X({ className: o, ...a }) {
+function X({
+  className: o,
+  ...a
+}) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -409,7 +454,10 @@ function X({ className: o, ...a }) {
   );
 }
 X.displayName = "CommandPaletteSeparator";
-function J({ className: o, ...a }) {
+function J({
+  className: o,
+  ...a
+}) {
   const { navigateLabel: n, runLabel: i, closeLabel: m, configureShortcutsLabel: p } = r.useContext(R);
   return /* @__PURE__ */ c(
     "div",