@checkstack/ui 1.6.1 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,125 @@
 # @checkstack/ui
 
+## 1.7.1
+
+### Patch Changes
+
+- 50e5f5f: Runtime plugin system: install + uninstall plugins from npm, GitHub releases
+  (including private GitHub Enterprise instances), or tarball uploads at
+  runtime, with multi-package bundles, dependency-derived compatibility checks,
+  multi-instance coordination via a Postgres artifact store, and
+  single-coordinator destructive cleanup.
+
+  Highlights:
+
+  - New `PluginSource` discriminated union and `PluginInstaller` /
+    `PluginInstallerRegistry` interfaces in `@checkstack/backend-api`. The
+    GitHub variant accepts an optional `apiBaseUrl` so deployments backed by
+    GitHub Enterprise can install from `https://ghe.example.com/api/v3`
+    instead of `api.github.com`.
+  - New `installPackageMetadataSchema` (Zod) in `@checkstack/common` validates
+    every plugin's `package.json` at install time. Required fields: `name`,
+    `version`, `description`, `author`, `license`, `checkstack.type`,
+    `checkstack.pluginId`. Optional: `checkstack.bundle`,
+    `checkstack.usageInstructions`, `checkstack.allowInstallScripts`.
+  - New `pluginManagerContract` in `@checkstack/pluginmanager-common` with
+    `list`, `previewInstall`, `install`, `previewUninstall`, `uninstall`, and
+    `events` procedures.
+  - New `@checkstack/pluginmanager-frontend` admin UI: installed-plugins list
+    with per-row uninstall (typed-confirmation modal, schema/configs/cascade
+    toggles), install page with NPM / Tarball Upload / GitHub Release tabs
+    (Catalog tab disabled — coming soon), and an events page surfacing the
+    install/uninstall audit log.
+  - New `bunx @checkstack/scripts plugin-pack` CLI for plugin authors —
+    per-package mode produces an npm-shaped tarball; `--bundle` mode produces
+    an outer tarball containing every sibling declared in
+    `package.json#checkstack.bundle`. Published to npm so external authors
+    can `bunx` it directly without a workspace checkout.
+  - Compatibility derived from `package.json#dependencies` ranges
+    (`semver.satisfies` against the platform's loaded `@checkstack/*`
+    versions) — no separate `compatibility` field.
+  - Multi-instance: originator persists artifacts + `plugins` rows + broadcasts
+    install/uninstall; receiving instances do in-process register/unregister
+    only. Destructive ops (drop schema, delete plugin_configs, delete
+    artifacts, delete `plugins` rows) run exactly once on the originator.
+  - Fresh-instance bootstrap: `loadPlugins()` hydrates any
+    `is_uninstallable=true` plugin missing from `node_modules` from the
+    artifact store before normal Phase 1 register.
+  - New schema: `plugin_artifacts` (tarball storage), `plugin_install_events`
+    (audit/error log). `plugins` extended with `version`, `metadata`,
+    `source`, `bundle_id`, `is_primary`. Local plugin sync now writes
+    `version` from each plugin's `package.json` so the admin UI shows real
+    versions instead of `—`.
+  - Tarball-upload endpoint (`POST /api/pluginmanager/upload-tarball`) for
+    the install UI; access-gated by `pluginmanager.plugin.manage`.
+  - Plugin Manager menu link added to the user menu (main grid, alongside
+    Profile / Notification Settings / etc.).
+
+  Cross-cutting changes:
+
+  - Backend request/response logging now flows through `rootLogger` (winston)
+    instead of `hono/logger`. 5xx responses include the response body inline
+    so swallowed early-return errors are visible in the log.
+  - The `/api/:pluginId/*` dispatcher now logs which core service is missing
+    or which `pluginId` had no metadata when it 500s.
+  - New `registerCorePluginMetadata` on `PluginManager` for core routers
+    (like the plugin manager itself) that need their metadata visible to the
+    RPC dispatcher without going through the full plugin lifecycle.
+  - ESLint: `unicorn/no-null` is now disabled globally. Drizzle distinguishes
+    between `null` (writes a real SQL NULL) and `undefined` (skip the column
+    on insert), so treating them as interchangeable produced latent bugs at
+    the persistence boundary. The bulk of the patch-bumped packages above
+    reflect lint-fix touches that landed when this rule was relaxed.
+  - Workspace-wide license normalization to `Elastic-2.0` (matches
+    `LICENSE.md`). Every `package.json` in the workspace now declares the
+    same SPDX identifier; the patch bumps capture this.
+
+  Plugin packages (every `plugins/*`): added a `pack` npm script
+  (`bunx @checkstack/scripts plugin-pack`), mirrored each plugin's
+  `pluginId` from `plugin-metadata.ts` into `package.json#checkstack.pluginId`
+  so install-time validation passes, stubbed any missing required metadata
+  fields (`description`, `author`, `license`), and added
+  `checkstack.bundle` to multi-package plugin primaries (telegram, rcon, ssh,
+  jira, queue-bullmq, queue-memory, cache-memory).
+
+  Breaking changes:
+
+  - The legacy single-method `PluginInstaller` interface (`install(packageName)`)
+    is removed. Callers must use `coreServices.pluginInstallerRegistry`.
+  - The old `pluginAdminContract` and `createPluginAdminRouter` are removed.
+    Replaced by `pluginManagerContract` in `@checkstack/pluginmanager-common`
+    and `createPluginManagerRouter` in `core/backend`.
+  - `@checkstack/test-utils-backend` no longer exports
+    `createMockPluginInstaller` / `MockPluginInstaller` (the legacy interface
+    it shimmed is gone).
+
+  Note: bumps are limited to `minor` (for packages with new public API
+  surface) and `patch` (for downstream consumers, license normalization,
+  and lint fixes). No `major` bumps despite the `PluginInstaller` removal —
+  the legacy interface had no third-party consumers in the wild before this
+  runtime plugin system landed, and the contract surface is the same shape
+  modulo the rename.
+
+- Updated dependencies [50e5f5f]
+  - @checkstack/common@0.8.0
+  - @checkstack/frontend-api@0.4.2
+
+## 1.7.0
+
+### Minor Changes
+
+- 32d52c6: Fix several modal/sheet/overlay closing issues:
+
+  - Replace the custom `DropdownMenu` container with a Radix-based `Popover` (desktop) and `Sheet` (mobile). The previous mobile implementation suppressed outside-click closing, leaving the notification bell's panel only closable by clicking the bell again. `UserMenu` and `NotificationBell` were updated to the new pattern. Leaf primitives `DropdownMenuItem`, `DropdownMenuLabel`, and `DropdownMenuSeparator` are preserved (now backed by a `MenuCloseContext`) so existing call sites continue to work.
+  - Fix `Dialog` outside-click closing. The previous structure made `DialogPrimitive.Content` cover the full viewport, so Radix never registered clicks on the dimmed area as "outside" — only ESC could close the modal. The centering wrapper is now a non-Content `<div>` and the actual modal box is the Content, so outside-click closes correctly. A visible X button is now rendered by default; pass `hideCloseButton` to suppress it (e.g. for the search overlay where it would clash with a custom header).
+  - Export a standalone `useIsMobile` hook and a new `Popover` primitive.
+  - Prevent Radix's auto-focus-return on `NotificationBell` and `UserMenu` overlays. Closing via an item with a `<Link>` (e.g. "View all notifications") would synchronously refocus the trigger via `onCloseAutoFocus`, stealing focus from the link mid-click on pages where another element held focus and requiring a second click to navigate.
+
+### Patch Changes
+
+- Updated dependencies [32d52c6]
+  - @checkstack/frontend-api@0.4.1
+
 ## 1.6.1
 
 ### Patch Changes

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.6.1",
+  "version": "1.7.1",
+  "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
     "@checkstack/common": "0.7.0",
-    "@checkstack/frontend-api": "0.3.11",
+    "@checkstack/frontend-api": "0.4.1",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -31,14 +32,14 @@
   "devDependencies": {
     "@checkstack/scripts": "0.1.2",
     "@checkstack/test-utils-frontend": "0.0.4",
-    "@checkstack/tsconfig": "0.0.5",
+    "@checkstack/tsconfig": "0.0.6",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^19.2.3",
     "typescript": "^5.0.0"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsgo -b",
     "lint": "bun run lint:code",
     "lint:code": "eslint . --max-warnings 0",
     "test": "bun test"

package/src/components/Dialog.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 import { cn } from "../utils";
 import { usePerformance } from "./PerformanceProvider";
 
@@ -54,33 +55,42 @@ interface DialogContentProps
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
     VariantProps<typeof dialogContentVariants> {}
 
+interface DialogContentExtraProps {
+  hideCloseButton?: boolean;
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps
->(({ className, children, size, ...props }, ref) => {
+  DialogContentProps & DialogContentExtraProps
+>(({ className, children, size, hideCloseButton, ...props }, ref) => {
   const { isLowPower } = usePerformance();
   return (
     <DialogPortal>
       <DialogOverlay />
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          "fixed inset-0 z-50 flex items-center justify-center p-4",
-          !isLowPower && "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        )}
-        {...props}
-      >
-        <div
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
+        <DialogPrimitive.Content
+          ref={ref}
           className={cn(
+            "pointer-events-auto relative",
             dialogContentVariants({ size }),
-            !isLowPower && "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            !isLowPower &&
+              "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
             className,
           )}
+          {...props}
         >
-          {/* Wrapper with negative margin and positive padding to allow focus rings to extend */}
           <div className="-mx-2 px-2">{children}</div>
-        </div>
-    </DialogPrimitive.Content>
+          {!hideCloseButton && (
+            <DialogPrimitive.Close
+              className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+              aria-label="Close"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </div>
     </DialogPortal>
   );
 });

package/src/components/DynamicForm/MultiTypeEditorField.tsx

@@ -123,7 +123,7 @@ export const MultiTypeEditorField: React.FC<MultiTypeEditorFieldProps> = ({
           obj[pair.key] = pair.value;
         }
         try {
-          // eslint-disable-next-line unicorn/no-null -- JSON.stringify requires null for formatting
+           
           onChange(JSON.stringify(obj, null, 2));
           return;
         } catch {

package/src/components/Menu.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, useContext } from "react";
+import { cn } from "../utils";
+
+export const MenuCloseContext = createContext<{ onClose?: () => void }>({});
+
+export const DropdownMenuItem: React.FC<{
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  icon?: React.ReactNode;
+  description?: React.ReactNode;
+  closeOnClick?: boolean;
+}> = ({
+  children,
+  onClick,
+  className,
+  icon,
+  description,
+  closeOnClick = true,
+}) => {
+  const { onClose } = useContext(MenuCloseContext);
+
+  const handleClick = () => {
+    if (onClick) onClick();
+    if (closeOnClick && onClose) onClose();
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={cn(
+        "flex flex-col items-start w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground transition-colors rounded-sm overflow-hidden",
+        className,
+      )}
+      role="menuitem"
+      type="button"
+    >
+      <div className="flex items-center w-full overflow-hidden">
+        {icon && (
+          <span className="mr-3 text-muted-foreground shrink-0">{icon}</span>
+        )}
+        <span className="flex-1 text-left truncate">{children}</span>
+      </div>
+      {description && (
+        <span
+          className={cn(
+            "text-[10px] text-muted-foreground mt-1 leading-tight text-left truncate w-full",
+            icon ? "pl-7" : "",
+          )}
+        >
+          {description}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export const DropdownMenuSeparator: React.FC<{ className?: string }> = ({
+  className,
+}) => (
+  <div className={cn("my-1 h-px bg-border col-span-full", className)} />
+);
+
+export const DropdownMenuLabel: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => (
+  <div
+    className={cn(
+      "px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider col-span-full",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

package/src/components/Popover.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
+
+type PopoverContentProps = React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+>;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({ className, align = "end", sideOffset = 8, ...props }, ref) => {
+  const { isLowPower } = usePerformance();
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-none",
+          !isLowPower &&
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+});
+PopoverContent.displayName = "PopoverContent";
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+};

package/src/components/UserMenu.tsx

@@ -1,12 +1,15 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { User, ChevronDown } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-} from "./DropdownMenu";
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./Sheet";
+import { MenuCloseContext, DropdownMenuLabel, DropdownMenuSeparator } from "./Menu";
+import { useIsMobile } from "../hooks/useIsMobile";
 import { cn } from "../utils";
 
 interface UserMenuProps {
@@ -25,60 +28,97 @@ export const UserMenu: React.FC<UserMenuProps> = ({
   className,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const isMobile = useIsMobile();
 
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger onClick={() => setIsOpen(!isOpen)}>
-        <button
-          className={cn(
-            "flex items-center gap-2 px-3 py-1.5 rounded-full hover:bg-accent transition-all border border-transparent hover:border-border",
-            isOpen && "bg-accent border-border",
-            className
-          )}
-        >
-          <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary">
-            {user.image ? (
-              <img
-                src={user.image}
-                alt={user.name || "User"}
-                className="w-full h-full rounded-full object-cover"
-              />
-            ) : (
-              <User size={14} />
-            )}
-          </div>
-          <span className="text-sm font-medium text-foreground hidden sm:inline-block max-w-[120px] truncate">
-            {user.name || user.email}
-          </span>
-          <ChevronDown
-            size={14}
-            className={cn(
-              "text-muted-foreground transition-transform",
-              isOpen && "rotate-180"
-            )}
+  const closeContextValue = useMemo(
+    () => ({ onClose: () => setIsOpen(false) }),
+    [],
+  );
+
+  const trigger = (
+    <button
+      className={cn(
+        "flex items-center gap-2 px-3 py-1.5 rounded-full hover:bg-accent transition-all border border-transparent hover:border-border",
+        isOpen && "bg-accent border-border",
+        className,
+      )}
+      type="button"
+    >
+      <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+        {user.image ? (
+          <img
+            src={user.image}
+            alt={user.name || "User"}
+            className="w-full h-full rounded-full object-cover"
           />
-        </button>
-      </DropdownMenuTrigger>
+        ) : (
+          <User size={14} />
+        )}
+      </div>
+      <span className="text-sm font-medium text-foreground hidden sm:inline-block max-w-[120px] truncate">
+        {user.name || user.email}
+      </span>
+      <ChevronDown
+        size={14}
+        className={cn(
+          "text-muted-foreground transition-transform",
+          isOpen && "rotate-180",
+        )}
+      />
+    </button>
+  );
 
-      <DropdownMenuContent 
-        isOpen={isOpen} 
-        onClose={() => setIsOpen(false)}
-        className="w-full sm:w-[400px] md:w-[460px]"
-        innerClassName="grid grid-cols-1 sm:grid-cols-2 p-2 gap-2 sm:gap-1"
-      >
-        <DropdownMenuLabel>
-          <div className="flex flex-col">
-            <span className="text-sm font-bold text-foreground truncate">
-              {user.name || "User"}
-            </span>
-            <span className="text-xs font-normal text-muted-foreground truncate">
-              {user.email}
-            </span>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {children}
-      </DropdownMenuContent>
-    </DropdownMenu>
+  const userInfo = (
+    <DropdownMenuLabel>
+      <div className="flex flex-col">
+        <span className="text-sm font-bold text-foreground truncate">
+          {user.name || "User"}
+        </span>
+        <span className="text-xs font-normal text-muted-foreground truncate">
+          {user.email}
+        </span>
+      </div>
+    </DropdownMenuLabel>
+  );
+
+  if (isMobile) {
+    return (
+      <MenuCloseContext.Provider value={closeContextValue}>
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetTrigger asChild>{trigger}</SheetTrigger>
+          <SheetContent
+            size="full"
+            className="flex flex-col p-0"
+            onCloseAutoFocus={(e) => e.preventDefault()}
+          >
+            <SheetHeader className="px-4 py-3 border-b border-border">
+              <SheetTitle className="text-base">Menu</SheetTitle>
+            </SheetHeader>
+            <div className="flex-1 overflow-y-auto p-2 grid grid-cols-1 gap-2">
+              {userInfo}
+              <DropdownMenuSeparator />
+              {children}
+            </div>
+          </SheetContent>
+        </Sheet>
+      </MenuCloseContext.Provider>
+    );
+  }
+
+  return (
+    <MenuCloseContext.Provider value={closeContextValue}>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+        <PopoverContent
+          align="end"
+          className="w-[400px] md:w-[460px] p-2 grid grid-cols-1 sm:grid-cols-2 gap-1"
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        >
+          {userInfo}
+          <DropdownMenuSeparator />
+          {children}
+        </PopoverContent>
+      </Popover>
+    </MenuCloseContext.Provider>
   );
 };

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT_QUERY = "(max-width: 640px)";
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = globalThis.matchMedia(MOBILE_BREAKPOINT_QUERY);
+    setIsMobile(mql.matches);
+    const handler = (e: MediaQueryListEvent) => {
+      setIsMobile(e.matches);
+    };
+    mql.addEventListener("change", handler);
+    return () => {
+      mql.removeEventListener("change", handler);
+    };
+  }, []);
+
+  return isMobile;
+}

package/src/index.ts

@@ -10,7 +10,7 @@ export * from "./components/SectionHeader";
 export * from "./components/StatusCard";
 export * from "./components/EmptyState";
 export * from "./components/LoadingSpinner";
-export * from "./components/DropdownMenu";
+export * from "./components/Menu";
 export * from "./components/UserMenu";
 export * from "./components/EditableText";
 export * from "./components/ConfirmationModal";
@@ -59,3 +59,5 @@ export * from "./hooks/useAnimatedNumber";
 export * from "./components/IDELayout";
 export * from "./components/MetricTile";
 export * from "./components/Sheet";
+export * from "./components/Popover";
+export * from "./hooks/useIsMobile";

package/tsconfig.json

@@ -2,5 +2,16 @@
   "extends": "@checkstack/tsconfig/frontend.json",
   "include": [
     "src"
+  ],
+  "references": [
+    {
+      "path": "../common"
+    },
+    {
+      "path": "../frontend-api"
+    },
+    {
+      "path": "../test-utils-frontend"
+    }
   ]
-}
+}

package/src/components/DropdownMenu.tsx

@@ -1,187 +0,0 @@
-import React, { useRef, useEffect, createContext, useContext, useState } from "react";
-import { createPortal } from "react-dom";
-import { X } from "lucide-react";
-import { cn } from "../utils";
-import { usePerformance } from "./PerformanceProvider";
-
-export const DropdownMenuContext = createContext<{ onClose?: () => void }>({});
-
-/**
- * Custom hook to detect mobile viewport.
- */
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    // Initial check
-    const mql = globalThis.matchMedia("(max-width: 640px)");
-    setIsMobile(mql.matches);
-
-    // Listener for changes
-    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-
-  return isMobile;
-}
-
-
-export const DropdownMenuRootContext = createContext<{ rootRef?: React.RefObject<HTMLDivElement> }>({});
-
-export const DropdownMenu: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const rootRef = useRef<HTMLDivElement>(null);
-  return (
-    <DropdownMenuRootContext.Provider value={{ rootRef }}>
-      <div ref={rootRef} className="relative inline-block text-left">{children}</div>
-    </DropdownMenuRootContext.Provider>
-  );
-};
-
-export const DropdownMenuTrigger: React.FC<{
-  children: React.ReactNode;
-  asChild?: boolean;
-  onClick?: () => void;
-}> = ({ children, onClick }) => {
-  return (
-    <div onClick={onClick} className="cursor-pointer">
-      {children}
-    </div>
-  );
-};
-
-export const DropdownMenuContent: React.FC<{
-  children: React.ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
-  className?: string;
-  innerClassName?: string;
-}> = ({ children, isOpen, onClose, className, innerClassName }) => {
-  const { isLowPower } = usePerformance();
-  const contentRef = useRef<HTMLDivElement>(null);
-  const { rootRef } = useContext(DropdownMenuRootContext);
-  const isMobile = useIsMobile();
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      // Don't auto-close if clicking outside on mobile (full screen modal style)
-      if (isMobile) return;
-      
-      const target = event.target as Node;
-      
-      // Don't close if clicking inside the menu content
-      if (contentRef.current && contentRef.current.contains(target)) {
-        return;
-      }
-      
-      // Don't close if clicking inside the wrapper (e.g. the trigger button)
-      // This allows the trigger's onClick to handle toggling the menu without conflict.
-      if (rootRef?.current && rootRef.current.contains(target)) {
-        return;
-      }
-      
-      onClose();
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      // Lock body scroll on mobile
-      if (isMobile) {
-        document.body.style.overflow = "hidden";
-      }
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      if (isMobile) {
-        document.body.style.overflow = "";
-      }
-    };
-  }, [isOpen, onClose, isMobile, rootRef]);
-
-  if (!isOpen) return <React.Fragment />;
-
-  const content = (
-    <div
-      ref={contentRef}
-      className={cn(
-        isMobile
-          ? "fixed inset-0 z-[100] bg-background w-full h-full p-4 overflow-y-auto"
-          : "absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-popover shadow-lg ring-1 ring-border focus:outline-none z-[100] max-h-[calc(100vh-4rem)] overflow-y-auto",
-        !isLowPower && "animate-in fade-in zoom-in-95 duration-100",
-        className
-      )}
-    >
-      <DropdownMenuContext.Provider value={{ onClose }}>
-        <div className={cn(isMobile ? "flex flex-col pt-4 pb-12" : "py-1", innerClassName)} role="none">
-          {isMobile && (
-            <div className="flex justify-between items-center mb-6 col-span-full px-2">
-              <h2 className="text-xl font-bold text-foreground">Menu</h2>
-              <button 
-                onClick={onClose} 
-                className="p-2 rounded-full hover:bg-accent text-muted-foreground transition-colors"
-                aria-label="Close menu"
-              >
-                <X className="w-6 h-6" />
-              </button>
-            </div>
-          )}
-          {children}
-        </div>
-      </DropdownMenuContext.Provider>
-    </div>
-  );
-
-  return isMobile ? createPortal(content, document.body) : content;
-};
-
-export const DropdownMenuItem: React.FC<{
-  children: React.ReactNode;
-  onClick?: () => void;
-  className?: string;
-  icon?: React.ReactNode;
-  description?: React.ReactNode;
-  closeOnClick?: boolean;
-}> = ({ children, onClick, className, icon, description, closeOnClick = true }) => {
-  const { onClose } = useContext(DropdownMenuContext);
-
-  const handleClick = () => {
-    if (onClick) onClick();
-    if (closeOnClick && onClose) onClose();
-  };
-
-  return (
-    <button
-      onClick={handleClick}
-      className={cn(
-        "flex flex-col items-start w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground transition-colors rounded-sm overflow-hidden",
-        className
-      )}
-      role="menuitem"
-    >
-      <div className="flex items-center w-full overflow-hidden">
-        {icon && <span className="mr-3 text-muted-foreground shrink-0">{icon}</span>}
-        <span className="flex-1 text-left truncate">{children}</span>
-      </div>
-      {description && (
-        <span className={cn("text-[10px] text-muted-foreground mt-1 leading-tight text-left truncate w-full", icon ? "pl-7" : "")}>
-          {description}
-        </span>
-      )}
-    </button>
-  );
-};
-
-export const DropdownMenuSeparator: React.FC<{ className?: string }> = ({ className }) => (
-  <div className={cn("my-1 h-px bg-border col-span-full", className)} />
-);
-
-export const DropdownMenuLabel: React.FC<{ children: React.ReactNode; className?: string }> = ({
-  children,
-  className
-}) => (
-  <div className={cn("px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider col-span-full", className)}>
-    {children}
-  </div>
-);