zudoku 0.13.7 → 0.14.1

package/src/lib/components/context/ZudokuContext.ts

@@ -1,7 +1,9 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
-import { useLocation } from "react-router-dom";
+import { matchPath, useLocation } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
+import { joinPath } from "../../util/joinPath.js";
+import { traverseSidebar } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<DevPortalContext | undefined>(
   undefined,
@@ -25,34 +27,40 @@ export const useApiIdentities = () => {
   });
 };
 
-export const useTopNavigationItem = () => {
-  const { topNavigation } = useZudoku();
+export const useCurrentNavigation = () => {
+  const { getPluginSidebar, sidebars, topNavigation } = useZudoku();
   const location = useLocation();
 
-  const firstPart = location.pathname.split("/").at(1);
-  if (!firstPart) return;
+  const currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
+    return traverseSidebar(sidebar, (item) => {
+      const itemId =
+        item.type === "doc"
+          ? joinPath(item.id)
+          : item.type === "category" && item.link
+            ? joinPath(item.link.id)
+            : undefined;
 
-  return topNavigation.find((item) => item.id === firstPart);
-};
-
-export const useNavigation = () => {
-  const { getPluginSidebar, sidebars } = useZudoku();
-  const navItem = useTopNavigationItem();
-  const path = navItem?.id;
-  const currentSidebar = path ? (sidebars[path] ?? []) : [];
-  const location = useLocation();
+      if (itemId === location.pathname) {
+        return item;
+      }
+    });
+  });
+  const currentTopNavItem =
+    topNavigation.find((t) => t.id === currentSidebarItem?.[0]) ??
+    topNavigation.find((item) => matchPath(item.id, location.pathname));
 
   return useSuspenseQuery({
     queryFn: async () => {
-      const pluginSidebar = path
-        ? await getPluginSidebar(path)
-        : await getPluginSidebar(location.pathname);
+      const pluginSidebar = await getPluginSidebar(location.pathname);
 
       return {
-        items: [...currentSidebar, ...pluginSidebar],
-        currentTopNavItem: navItem,
+        sidebar: [
+          ...(currentSidebarItem ? currentSidebarItem[1] : []),
+          ...pluginSidebar,
+        ],
+        topNavItem: currentTopNavItem,
       };
     },
-    queryKey: ["navigation", path],
+    queryKey: ["navigation", location.pathname],
   });
 };

package/src/lib/components/navigation/Sidebar.tsx

@@ -2,23 +2,23 @@ import { useRef } from "react";
 
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
-import { useNavigation } from "../context/ZudokuContext.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
 export const Sidebar = () => {
   const navRef = useRef<HTMLDivElement | null>(null);
-  const navigation = useNavigation();
+  const navigation = useCurrentNavigation();
 
   return (
     <>
       <SidebarWrapper
         ref={navRef}
-        pushMainContent={navigation.data.items.length > 0}
+        pushMainContent={navigation.data.sidebar.length > 0}
       >
         <Slotlet name="zudoku-before-navigation" />
-        {navigation.data.items.map((item) => (
+        {navigation.data.sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
         <Slotlet name="zudoku-after-navigation" />
@@ -30,7 +30,7 @@ export const Sidebar = () => {
         <VisuallyHidden>
           <DrawerTitle>Sidebar</DrawerTitle>
         </VisuallyHidden>
-        {navigation.data.items.map((item) => (
+        {navigation.data.sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
       </DrawerContent>

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -5,7 +5,6 @@ import { NavLink, useMatch } from "react-router-dom";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
-import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
 
@@ -16,7 +15,6 @@ export const SidebarCategory = ({
   category: SidebarItemCategory;
   level: number;
 }) => {
-  const topNavItem = useTopNavigationItem();
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
 
@@ -26,7 +24,7 @@ export const SidebarCategory = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
-  const isActive = useMatch(joinPath(topNavItem?.id, category.link?.id));
+  const isActive = useMatch(category.link?.id ?? "");
 
   useEffect(() => {
     // this is triggered when an item from the sidebar is clicked
@@ -87,7 +85,7 @@ export const SidebarCategory = ({
           )}
           {category.link?.type === "doc" ? (
             <NavLink
-              to={joinPath(topNavItem?.id, category.link.id)}
+              to={joinPath(category.link.id)}
               className="flex-1"
               onClick={() => {
                 // if it is the current path and closed then open it because there's no path change to trigger the open

package/src/lib/components/navigation/SidebarItem.tsx

@@ -6,7 +6,6 @@ import type { SidebarItem as SidebarItemType } from "../../../config/validators/
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
-import { useTopNavigationItem } from "../context/ZudokuContext.js";
 import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
@@ -43,7 +42,6 @@ export const SidebarItem = ({
   basePath?: string;
   level?: number;
 }) => {
-  const topNavItem = useTopNavigationItem();
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
@@ -56,7 +54,7 @@ export const SidebarItem = ({
           className={({ isActive }) =>
             navigationListItem({ isActive, isTopLevel: level === 0 })
           }
-          to={joinPath(topNavItem?.id, item.id)}
+          to={joinPath(item.id)}
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (

package/src/lib/components/navigation/utils.ts

@@ -4,7 +4,7 @@ import type {
   SidebarItemCategory,
 } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";
-import { useTopNavigationItem, useZudoku } from "../context/ZudokuContext.js";
+import { useCurrentNavigation } from "../context/ZudokuContext.js";
 
 export type TraverseCallback<T> = (
   item: SidebarItem,
@@ -42,15 +42,12 @@ export const traverseSidebarItem = <T>(
 
 export const useCurrentItem = () => {
   const location = useLocation();
-  const topNavItem = useTopNavigationItem();
-  const { sidebars } = useZudoku();
-  const currentSidebar = topNavItem?.id ? sidebars[topNavItem.id] : [];
+  const nav = useCurrentNavigation();
+
+  const currentSidebar = nav.data.sidebar;
 
   return traverseSidebar(currentSidebar, (item) => {
-    if (
-      item.type === "doc" &&
-      joinPath(topNavItem?.id, item.id) === location.pathname
-    ) {
+    if (item.type === "doc" && joinPath(item.id) === location.pathname) {
       return item;
     }
   });
@@ -58,18 +55,17 @@ export const useCurrentItem = () => {
 
 export const useIsCategoryOpen = (category: SidebarItemCategory) => {
   const location = useLocation();
-  const topNavItem = useTopNavigationItem();
 
   return traverseSidebarItem(category, (item) => {
     if (item.type === "category" && item.link) {
-      const categoryLinkPath = joinPath(topNavItem?.id, item.link.id);
+      const categoryLinkPath = joinPath(item.link.id);
       if (categoryLinkPath === location.pathname) {
         return true;
       }
     }
 
     if (item.type === "doc") {
-      const docPath = joinPath(topNavItem?.id, item.id);
+      const docPath = joinPath(item.id);
       if (docPath === location.pathname) {
         return true;
       }
@@ -82,9 +78,8 @@ export const usePrevNext = (): {
   next?: { label: string; id: string };
 } => {
   const currentId = useLocation().pathname;
-  const { sidebars } = useZudoku();
-  const topNavItem = useTopNavigationItem();
-  const currentSidebar = topNavItem?.id ? sidebars[topNavItem.id] : [];
+  const nav = useCurrentNavigation();
+  const currentSidebar = nav.data.sidebar;
 
   let prev;
   let next;
@@ -94,9 +89,9 @@ export const usePrevNext = (): {
   traverseSidebar(currentSidebar, (item) => {
     const itemId =
       item.type === "doc"
-        ? joinPath(topNavItem?.id, item.id)
+        ? joinPath(item.id)
         : item.type === "category" && item.link
-          ? joinPath(topNavItem?.id, item.link.id)
+          ? joinPath(item.link.id)
           : undefined;
 
     if (!itemId) return;

package/src/lib/core/DevPortalContext.ts

@@ -1,6 +1,7 @@
 import { QueryClient } from "@tanstack/react-query";
 import { ReactNode } from "react";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
+import { TopNavigationItem } from "../../config/validators/validate.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
 import { Slotlets } from "../components/SlotletProvider.js";
@@ -60,12 +61,7 @@ export type ZudokuContextOptions = {
   metadata?: Metadata;
   page?: Page;
   authentication?: AuthenticationProvider;
-  topNavigation?: Array<{
-    id: string;
-    label: string;
-    default?: string;
-    display?: "auth" | "anon" | "always";
-  }>;
+  topNavigation?: TopNavigationItem[];
   sidebars?: SidebarConfig;
   plugins?: DevPortalPlugin[];
   slotlets?: Slotlets;
@@ -77,7 +73,7 @@ export type ZudokuContextOptions = {
 
 export class DevPortalContext {
   public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
-  public sidebars: NonNullable<ZudokuContextOptions["sidebars"]>;
+  public sidebars: SidebarConfig;
   public topNavigation: NonNullable<ZudokuContextOptions["topNavigation"]>;
   public meta: ZudokuContextOptions["metadata"];
   public page: ZudokuContextOptions["page"];

package/src/lib/core/plugins.ts

@@ -11,6 +11,8 @@ export type DevPortalPlugin =
   | ApiIdentityPlugin
   | SearchProviderPlugin;
 
+export type { RouteObject };
+
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
   getSidebar?: (path: string) => Promise<Sidebar>;

package/src/lib/plugins/custom-pages/CustomPage.tsx

@@ -9,8 +9,8 @@ export const CustomPage = ({
   render,
   prose = true,
 }: Omit<CustomPageConfig, "path">) => {
-  const slotletProps = useExposedProps();
-  const content = render ? React.createElement(render, slotletProps) : element;
+  const exposedProps = useExposedProps();
+  const content = render ? React.createElement(render, exposedProps) : element;
 
   return (
     <div className={cn(prose && ProseClasses, "max-w-full")}>{content}</div>

package/src/lib/plugins/markdown/index.tsx

@@ -1,13 +1,13 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
+import { RouteObject } from "react-router-dom";
+import { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { DevPortalPlugin } from "../../core/plugins.js";
-import { generateRoutes } from "./generateRoutes.js";
+import { DocResolver } from "./resolver.js";
 
-export type MarkdownPluginOptions = {
-  markdownFiles: Record<string, () => Promise<MDXImport>>;
-  defaultOptions?: MarkdownPluginDefaultOptions;
-  filesPath: string;
-};
+export interface MarkdownPluginOptions extends ZudokuDocsConfig {
+  fileImports: Record<string, () => Promise<MDXImport>>;
+}
 export type MarkdownPluginDefaultOptions = Pick<
   Frontmatter,
   "toc" | "disablePager"
@@ -27,10 +27,47 @@ export type MDXImport = {
   default: (props: MDXProps) => JSX.Element;
 };
 
-export const markdownPlugin = ({
-  markdownFiles,
-  defaultOptions,
-  filesPath,
-}: MarkdownPluginOptions): DevPortalPlugin => ({
-  getRoutes: () => generateRoutes(markdownFiles, filesPath, defaultOptions),
+export const markdownPlugin = (
+  options: MarkdownPluginOptions[],
+): DevPortalPlugin => ({
+  getRoutes: () => {
+    const routeMap = new Map<string, RouteObject>();
+    options.forEach(({ fileImports, files, defaultOptions }) =>
+      Object.entries(fileImports).flatMap(([file, importPromise]) => {
+        const routePath = DocResolver.resolveRoutePath({
+          filesGlob: files,
+          fsPath: file,
+        });
+
+        if (!routePath) return [];
+
+        if (routeMap.has(routePath)) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Duplicate route path found for ${routePath}. Skipping file at '${file}'.`,
+          );
+          return [];
+        }
+
+        const route: RouteObject = {
+          path: routePath,
+          lazy: async () => {
+            const { MdxPage } = await import("./MdxPage.js");
+            const { default: Component, ...props } = await importPromise();
+            return {
+              element: (
+                <MdxPage
+                  mdxComponent={Component}
+                  {...props}
+                  defaultOptions={defaultOptions}
+                />
+              ),
+            };
+          },
+        };
+        routeMap.set(routePath, route);
+      }),
+    );
+    return [...routeMap.values()];
+  },
 });

package/src/lib/plugins/markdown/resolver.ts

@@ -0,0 +1,92 @@
+import fs from "fs";
+import path from "path";
+import {
+  ZudokuConfig,
+  ZudokuDocsConfig,
+} from "../../../config/validators/validate.js";
+
+const DEFAULT_DOCS_FILES = "/pages/**/*.{md,mdx}";
+
+// TODO: This should be dynamic based on the glob selector
+const SUPPORTED_EXTENSIONS = [".md", ".mdx"];
+
+/**
+ * Utilities for resolving markdown file paths and routes
+ */
+export class DocResolver {
+  constructor(private config: ZudokuConfig) {}
+
+  fileMap = new Map<string, string>();
+
+  /**
+   * Gets the default docs config from the zudoku config
+   */
+  getDocsConfigs() {
+    const docsConfigs: ZudokuDocsConfig[] = this.config.docs
+      ? Array.isArray(this.config.docs)
+        ? this.config.docs
+        : [this.config.docs]
+      : [{ files: DEFAULT_DOCS_FILES }];
+
+    return docsConfigs;
+  }
+
+  /**
+   * Resolves the first matching file system path for a given docId
+   * @param docId - The docId to resolve
+   * @returns
+   */
+  resolveFilePath(docId: string) {
+    const docsConfigs = this.getDocsConfigs();
+    let fsPath: string | undefined;
+
+    docsConfigs.forEach(({ files: fileGlob }) => {
+      if (fsPath) {
+        return;
+      }
+      const rootDir = DocResolver.getRootDir(fileGlob);
+      for (const ext of SUPPORTED_EXTENSIONS) {
+        if (fsPath) {
+          return;
+        }
+        const checkPath = path.join(rootDir, `${docId}${ext}`);
+        if (fs.existsSync(checkPath)) {
+          fsPath = checkPath;
+        }
+      }
+    });
+
+    return fsPath;
+  }
+
+  /**
+   * Gets the root directory from a files glob
+   */
+  private static getRootDir(filesGlob: string) {
+    let rootDir = filesGlob.split("**")[0];
+    if (!rootDir) {
+      throw new Error("Invalid files glob. Must have '**' in the path.");
+    }
+    rootDir = rootDir.replace("/**", "/");
+    return rootDir;
+  }
+
+  /**
+   * Resolves the route path for a given file system path
+   * @param options - The options to resolve the route path
+   * @returns The string route path
+   */
+  static resolveRoutePath({
+    filesGlob,
+    fsPath,
+  }: {
+    filesGlob: string;
+    fsPath: string;
+  }) {
+    const rootDir = this.getRootDir(filesGlob);
+    const re = new RegExp(`^${rootDir}(.*).mdx?`);
+    const match = fsPath.match(re);
+    const routePath = match?.at(1);
+    return routePath;
+  }
+}

package/src/lib/plugins/openapi/Endpoint.tsx

@@ -62,9 +62,9 @@ export const Endpoint = () => {
       <div className="flex items-center gap-2">
         <span className="font-medium text-sm">Endpoint:</span>
         <InlineCode className="text-xs px-2 py-1.5" selectOnClick>
-          {servers[0].url}
+          {servers[0]!.url}
         </InlineCode>
-        <CopyButton url={servers[0].url} />
+        <CopyButton url={servers[0]!.url} />
       </div>
     );
   }

package/src/lib/plugins/openapi/RequestBodySidecarBox.tsx

@@ -26,7 +26,7 @@ export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
             className="text-xs max-h-[450px] p-2"
             code={JSON.stringify(
               content.at(0)?.schema
-                ? generateSchemaExample(content[0].schema as SchemaObject)
+                ? generateSchemaExample(content[0]!.schema as SchemaObject)
                 : "",
               null,
               2,

package/src/lib/plugins/openapi/Sidecar.tsx

@@ -198,7 +198,7 @@ export const Sidecar = ({
             language={selectedLang}
             noBackground
             className="text-xs p-2"
-            code={code}
+            code={code!}
           />
         </SidecarBox.Body>
         <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-1">

package/src/lib/plugins/openapi/client/worker.ts

@@ -10,7 +10,7 @@ worker.addEventListener(
   function (event: MessageEvent<{ id: string; body: string }>) {
     const port = event.ports[0];
 
-    port.onmessage = async function (e) {
+    port!.onmessage = async function (e) {
       const response = await localServer.fetch(
         new Request("/__z/graphql", {
           method: "POST",
@@ -21,7 +21,7 @@ worker.addEventListener(
         }),
       );
 
-      port.postMessage({
+      port!.postMessage({
         id: e.data.id,
         body: await response.text(),
       } satisfies WorkerGraphQLMessage);

package/src/lib/plugins/openapi/index.tsx

@@ -170,7 +170,7 @@ export const openApiPlugin = (
             href: `#${operation.slug}`,
             badge: {
               label: operation.method,
-              color: MethodColorMap[operation.method.toLowerCase()],
+              color: MethodColorMap[operation.method.toLowerCase()]!,
             },
           })),
         }));

package/src/lib/ui/Command.tsx

@@ -0,0 +1,151 @@
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
+import { cn } from "../util/cn.js";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line react/no-unknown-property
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+};