@dinachi/cli 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [
@@ -15,12 +15,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dinachi/ui"
+    "url": "git+https://github.com/dinachi/ui.git"
   },
   "homepage": "https://dinachi.dev",
   "bin": {
-    "dinachi": "./dist/index.js",
-    "dinachi-ui": "./dist/index.js"
+    "dinachi": "dist/index.js",
+    "dinachi-ui": "dist/index.js"
   },
   "files": [
     "dist",
@@ -51,6 +51,7 @@
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean",
     "dev": "tsup src/index.ts --format esm --dts --watch",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "pnpm run build && node --test test/**/*.test.mjs"
   }
 }

package/templates/autocomplete/autocomplete.tsx

@@ -0,0 +1,197 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"
+import { ChevronDown, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Autocomplete = AutocompletePrimitive.Root
+const AutocompleteValue = AutocompletePrimitive.Value
+const AutocompleteCollection = AutocompletePrimitive.Collection
+const AutocompletePortal = AutocompletePrimitive.Portal
+
+const AutocompleteInput = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Input
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm",
+      "placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+AutocompleteInput.displayName = "AutocompleteInput"
+
+const AutocompleteTrigger = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AutocompletePrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-3",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children ?? (
+      <AutocompletePrimitive.Icon>
+        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+      </AutocompletePrimitive.Icon>
+    )}
+  </AutocompletePrimitive.Trigger>
+))
+AutocompleteTrigger.displayName = "AutocompleteTrigger"
+
+const AutocompleteClear = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Clear>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Clear>
+>(({ className, children, ...props }, ref) => (
+  <AutocompletePrimitive.Clear
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted-foreground",
+      "hover:bg-accent hover:text-accent-foreground",
+      className
+    )}
+    {...props}
+  >
+    {children ?? <X className="h-4 w-4" />}
+  </AutocompletePrimitive.Clear>
+))
+AutocompleteClear.displayName = "AutocompleteClear"
+
+const AutocompleteContent = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Popup>
+>(({ className, ...props }, ref) => (
+  <AutocompletePortal>
+    <AutocompletePrimitive.Positioner sideOffset={4}>
+      <AutocompletePrimitive.Popup
+        ref={ref}
+        className={cn(
+          "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          "origin-[var(--transform-origin)] outline-none",
+          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AutocompletePrimitive.Positioner>
+  </AutocompletePortal>
+))
+AutocompleteContent.displayName = "AutocompleteContent"
+
+const AutocompleteList = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.List>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.List
+    ref={ref}
+    className={cn("max-h-80 overflow-y-auto p-1", className)}
+    {...props}
+  />
+))
+AutocompleteList.displayName = "AutocompleteList"
+
+const AutocompleteItem = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, children, inset, ...props }, ref) => (
+  <AutocompletePrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </AutocompletePrimitive.Item>
+))
+AutocompleteItem.displayName = "AutocompleteItem"
+
+const AutocompleteGroup = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Group ref={ref} className={cn(className)} {...props} />
+))
+AutocompleteGroup.displayName = "AutocompleteGroup"
+
+const AutocompleteGroupLabel = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.GroupLabel>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.GroupLabel>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.GroupLabel
+    ref={ref}
+    className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)}
+    {...props}
+  />
+))
+AutocompleteGroupLabel.displayName = "AutocompleteGroupLabel"
+
+const AutocompleteEmpty = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Empty
+    ref={ref}
+    className={cn("px-2 py-6 text-center text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AutocompleteEmpty.displayName = "AutocompleteEmpty"
+
+const AutocompleteStatus = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Status>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Status>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Status ref={ref} className={cn("sr-only", className)} {...props} />
+))
+AutocompleteStatus.displayName = "AutocompleteStatus"
+
+const AutocompleteSeparator = React.forwardRef<
+  React.ComponentRef<typeof AutocompletePrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof AutocompletePrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <AutocompletePrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+AutocompleteSeparator.displayName = "AutocompleteSeparator"
+
+export {
+  Autocomplete,
+  AutocompleteValue,
+  AutocompleteCollection,
+  AutocompletePortal,
+  AutocompleteInput,
+  AutocompleteTrigger,
+  AutocompleteClear,
+  AutocompleteContent,
+  AutocompleteList,
+  AutocompleteItem,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteStatus,
+  AutocompleteSeparator,
+}

package/templates/autocomplete/index.ts

@@ -0,0 +1,17 @@
+export {
+  Autocomplete,
+  AutocompleteValue,
+  AutocompleteCollection,
+  AutocompletePortal,
+  AutocompleteInput,
+  AutocompleteTrigger,
+  AutocompleteClear,
+  AutocompleteContent,
+  AutocompleteList,
+  AutocompleteItem,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteStatus,
+  AutocompleteSeparator,
+} from "./autocomplete"

package/templates/combobox/combobox.tsx

@@ -0,0 +1,202 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"
+import { Check, ChevronDown, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Combobox = ComboboxPrimitive.Root
+const ComboboxValue = ComboboxPrimitive.Value
+const ComboboxCollection = ComboboxPrimitive.Collection
+const ComboboxPortal = ComboboxPrimitive.Portal
+
+const ComboboxInput = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Input
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm",
+      "placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+ComboboxInput.displayName = "ComboboxInput"
+
+const ComboboxTrigger = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <ComboboxPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-3",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children ?? (
+      <ComboboxPrimitive.Icon>
+        <ChevronDown className="h-4 w-4 text-muted-foreground" />
+      </ComboboxPrimitive.Icon>
+    )}
+  </ComboboxPrimitive.Trigger>
+))
+ComboboxTrigger.displayName = "ComboboxTrigger"
+
+const ComboboxClear = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Clear>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Clear>
+>(({ className, children, ...props }, ref) => (
+  <ComboboxPrimitive.Clear
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted-foreground",
+      "hover:bg-accent hover:text-accent-foreground",
+      className
+    )}
+    {...props}
+  >
+    {children ?? <X className="h-4 w-4" />}
+  </ComboboxPrimitive.Clear>
+))
+ComboboxClear.displayName = "ComboboxClear"
+
+const ComboboxContent = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup>
+>(({ className, ...props }, ref) => (
+  <ComboboxPortal>
+    <ComboboxPrimitive.Positioner sideOffset={4}>
+      <ComboboxPrimitive.Popup
+        ref={ref}
+        className={cn(
+          "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          "origin-[var(--transform-origin)] outline-none",
+          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </ComboboxPrimitive.Positioner>
+  </ComboboxPortal>
+))
+ComboboxContent.displayName = "ComboboxContent"
+
+const ComboboxList = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.List
+    ref={ref}
+    className={cn("max-h-80 overflow-y-auto p-1", className)}
+    {...props}
+  />
+))
+ComboboxList.displayName = "ComboboxList"
+
+const ComboboxItem = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, children, inset, ...props }, ref) => (
+  <ComboboxPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-10",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ComboboxPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ComboboxPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ComboboxPrimitive.Item>
+))
+ComboboxItem.displayName = "ComboboxItem"
+
+const ComboboxGroup = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Group ref={ref} className={cn(className)} {...props} />
+))
+ComboboxGroup.displayName = "ComboboxGroup"
+
+const ComboboxGroupLabel = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.GroupLabel>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.GroupLabel
+    ref={ref}
+    className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)}
+    {...props}
+  />
+))
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel"
+
+const ComboboxEmpty = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Empty
+    ref={ref}
+    className={cn("px-2 py-6 text-center text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+ComboboxEmpty.displayName = "ComboboxEmpty"
+
+const ComboboxStatus = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Status>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Status>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Status ref={ref} className={cn("sr-only", className)} {...props} />
+))
+ComboboxStatus.displayName = "ComboboxStatus"
+
+const ComboboxSeparator = React.forwardRef<
+  React.ComponentRef<typeof ComboboxPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ComboboxPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ComboboxSeparator.displayName = "ComboboxSeparator"
+
+export {
+  Combobox,
+  ComboboxValue,
+  ComboboxCollection,
+  ComboboxPortal,
+  ComboboxInput,
+  ComboboxTrigger,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxEmpty,
+  ComboboxStatus,
+  ComboboxSeparator,
+}

package/templates/combobox/index.ts

@@ -0,0 +1,17 @@
+export {
+  Combobox,
+  ComboboxValue,
+  ComboboxCollection,
+  ComboboxPortal,
+  ComboboxInput,
+  ComboboxTrigger,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxEmpty,
+  ComboboxStatus,
+  ComboboxSeparator,
+} from "./combobox"

package/templates/context-menu/context-menu.tsx

@@ -2,9 +2,9 @@
 import * as React from "react";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { Menu } from "@base-ui/react/menu";
-import { cn } from "@/lib/utils"
-import { Check, ChevronRight, Circle } from "lucide-react";
 import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@/lib/utils";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
 const ContextMenu = React.forwardRef<
   React.ComponentRef<typeof BaseContextMenu.Root>,
@@ -58,21 +58,57 @@ ContextMenuPositioner.displayName = "ContextMenuPositioner";
 
 const ContextMenuContent = React.forwardRef<
   React.ComponentRef<typeof BaseContextMenu.Popup>,
-  React.ComponentProps<typeof BaseContextMenu.Popup>
->(({ className, ...props }, ref) => (
-  <BaseContextMenu.Popup
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
-      "origin-[var(--transform-origin)]",
-      "outline-none focus:outline-none focus-visible:outline-none",
-      "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
-      "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
-      className
-    )}
-    {...props}
-  />
-));
+  React.ComponentProps<typeof BaseContextMenu.Popup> & {
+    container?: HTMLElement | React.RefObject<HTMLElement | null> | null;
+  }
+>(({ className, container, ...props }, ref) => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    // If container is provided, use it
+    if (container) {
+      if (container instanceof HTMLElement) {
+        setPortalContainer(container);
+      } else if (container.current) {
+        setPortalContainer(container.current);
+      }
+      return;
+    }
+
+    // Otherwise create/use the high-level portal root
+    let portalRoot = document.getElementById(
+      "context-menu-portal-root"
+    ) as HTMLElement;
+    if (!portalRoot) {
+      portalRoot = document.createElement("div");
+      portalRoot.id = "context-menu-portal-root";
+      portalRoot.style.cssText =
+        "position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; isolation: isolate;";
+      document.body.appendChild(portalRoot);
+    }
+    setPortalContainer(portalRoot);
+  }, [container]);
+
+  return (
+    <ContextMenuPortal container={portalContainer}>
+      <ContextMenuPositioner>
+        <BaseContextMenu.Popup
+          ref={ref}
+          className={cn(
+            "z-[9999] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg pointer-events-auto",
+            "origin-[var(--transform-origin)]",
+            "outline-none focus:outline-none focus-visible:outline-none",
+            "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+            "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </ContextMenuPositioner>
+    </ContextMenuPortal>
+  );
+});
 ContextMenuContent.displayName = "ContextMenuContent";
 
 const ContextMenuItem = React.forwardRef<
@@ -151,6 +187,14 @@ const ContextMenuRadioItem = React.forwardRef<
 ));
 ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
 
+const ContextMenuGroup = React.forwardRef<
+  React.ComponentRef<typeof BaseContextMenu.Group>,
+  React.ComponentProps<typeof BaseContextMenu.Group>
+>(({ className, ...props }, ref) => (
+  <BaseContextMenu.Group ref={ref} className={cn(className)} {...props} />
+));
+ContextMenuGroup.displayName = "ContextMenuGroup";
+
 const ContextMenuLabel = React.forwardRef<
   React.ComponentRef<typeof BaseContextMenu.GroupLabel>,
   React.ComponentProps<typeof BaseContextMenu.GroupLabel> & {
@@ -199,11 +243,11 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 // Submenu components using Menu from @base-ui-components
 const ContextMenuSub = React.forwardRef<
-  React.ComponentRef<typeof Menu.Root>,
-  React.ComponentProps<typeof Menu.Root>
+  HTMLDivElement,
+  React.ComponentProps<typeof Menu.SubmenuRoot>
 >(({ children, ...props }, ref) => {
   const element = useRender({
-    render: <Menu.Root>{children}</Menu.Root>,
+    render: <Menu.SubmenuRoot>{children}</Menu.SubmenuRoot>,
     props,
     ref,
   });
@@ -239,24 +283,44 @@ ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 const ContextMenuSubContent = React.forwardRef<
   React.ComponentRef<typeof Menu.Popup>,
   React.ComponentProps<typeof Menu.Popup>
->(({ className, ...props }, ref) => (
-  <Menu.Portal>
-    <Menu.Positioner className="outline-none" alignOffset={-4} sideOffset={8}>
-      <Menu.Popup
-        ref={ref}
-        className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
-          "origin-[var(--transform-origin)]",
-          "outline-none focus:outline-none focus-visible:outline-none",
-          "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
-          "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
-          className
-        )}
-        {...props}
-      />
-    </Menu.Positioner>
-  </Menu.Portal>
-));
+>(({ className, ...props }, ref) => {
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    // Use the same high-level portal root for submenus
+    let portalRoot = document.getElementById(
+      "context-menu-portal-root"
+    ) as HTMLElement;
+    if (!portalRoot) {
+      portalRoot = document.createElement("div");
+      portalRoot.id = "context-menu-portal-root";
+      portalRoot.style.cssText =
+        "position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; isolation: isolate;";
+      document.body.appendChild(portalRoot);
+    }
+    setPortalContainer(portalRoot);
+  }, []);
+
+  return (
+    <Menu.Portal container={portalContainer}>
+      <Menu.Positioner className="outline-none" alignOffset={-4} sideOffset={8}>
+        <Menu.Popup
+          ref={ref}
+          className={cn(
+            "z-[9999] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg pointer-events-auto",
+            "origin-[var(--transform-origin)]",
+            "outline-none focus:outline-none focus-visible:outline-none",
+            "data-[starting-style]:animate-in data-[starting-style]:fade-in-0 data-[starting-style]:zoom-in-95",
+            "data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </Menu.Positioner>
+    </Menu.Portal>
+  );
+});
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 
 export {
@@ -269,10 +333,11 @@ export {
   ContextMenuCheckboxItem,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
+  ContextMenuGroup,
   ContextMenuLabel,
   ContextMenuSeparator,
   ContextMenuShortcut,
   ContextMenuSub,
   ContextMenuSubTrigger,
   ContextMenuSubContent,
-};
+};