Reorganize components

app/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { forwardRef, memo } from "react";
+
+interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
+  ({ className = "", children, ...props }, ref) => {
+    const menuClasses = `
+      bg-black
+      border border-[var(--color-border-default-tertiary)]
+      rounded-[var(--measures-radius-medium)]
+      shadow-lg
+      p-[4px]
+      min-w-[200px]
+      max-w-[300px]
+      ${className}
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    return (
+      <div
+        ref={ref}
+        className={menuClasses}
+        role="menu"
+        style={{ backgroundColor: "#000000" }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+ContextMenu.displayName = "ContextMenu";
+
+export default memo(ContextMenu);

app/components/ContextMenu/ContextMenuDivider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { forwardRef, memo } from "react";
+
+interface ContextMenuDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+const ContextMenuDivider = forwardRef<HTMLDivElement, ContextMenuDividerProps>(
+  ({ className = "", ...props }, ref) => {
+    const dividerClasses = `
+    border-t border-[var(--color-border-default-tertiary)]
+    my-1
+    ${className}
+  `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    return (
+      <div ref={ref} className={dividerClasses} role="separator" {...props} />
+    );
+  },
+);
+
+ContextMenuDivider.displayName = "ContextMenuDivider";
+
+export default memo(ContextMenuDivider);

app/components/ContextMenu/ContextMenuItem/ContextMenuItem.container.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { forwardRef, memo, useCallback } from "react";
+import { ContextMenuItemView } from "./ContextMenuItem.view";
+import type { ContextMenuItemProps } from "./ContextMenuItem.types";
+import { normalizeContextMenuItemSize } from "../../../lib/propNormalization";
+
+const ContextMenuItemContainer = forwardRef<
+  HTMLDivElement,
+  ContextMenuItemProps
+>(
+  (
+    {
+      children,
+      selected = false,
+      hasSubmenu = false,
+      disabled = false,
+      className = "",
+      onClick,
+      size: sizeProp = "medium",
+      ...props
+    },
+    ref,
+  ) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const size = normalizeContextMenuItemSize(sizeProp);
+    const getTextSize = (): string => {
+      switch (size) {
+        case "small":
+          return "text-[10px] leading-[14px]";
+        case "medium":
+          return "text-[14px] leading-[20px]";
+        case "large":
+          return "text-[16px] leading-[24px]";
+        default:
+          return "text-[14px] leading-[20px]";
+      }
+    };
+
+    const itemClasses = `
+      flex items-center justify-between
+      px-[8px] py-[4px]
+      text-[var(--color-content-default-brand-primary)]
+      ${getTextSize()}
+      cursor-pointer
+      transition-colors duration-150
+      ${
+        selected
+          ? "bg-[var(--color-surface-default-secondary)] rounded-[var(--measures-radius-small)]"
+          : ""
+      }
+      ${
+        disabled
+          ? "opacity-50 cursor-not-allowed"
+          : "hover:!bg-[var(--color-surface-default-secondary)] hover:!rounded-[var(--measures-radius-small)]"
+      }
+      ${className}
+    `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    const handleClick = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!disabled && onClick) {
+          onClick(e);
+        }
+      },
+      [disabled, onClick],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (!disabled && onClick) {
+            onClick(e);
+          }
+        }
+      },
+      [disabled, onClick],
+    );
+
+    return (
+      <ContextMenuItemView
+        ref={ref}
+        selected={selected}
+        hasSubmenu={hasSubmenu}
+        disabled={disabled}
+        className={className}
+        itemClasses={itemClasses}
+        handleClick={handleClick}
+        handleKeyDown={handleKeyDown}
+        {...props}
+      >
+        {children}
+      </ContextMenuItemView>
+    );
+  },
+);
+
+ContextMenuItemContainer.displayName = "ContextMenuItem";
+
+export default memo(ContextMenuItemContainer);

app/components/ContextMenu/ContextMenuItem/ContextMenuItem.types.ts

@@ -0,0 +1,28 @@
+export type ContextMenuItemSizeValue = "small" | "medium" | "large" | "Small" | "Medium" | "Large";
+
+export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  selected?: boolean;
+  hasSubmenu?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onClick?: (
+    _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+  ) => void;
+  /**
+   * Context menu item size. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: ContextMenuItemSizeValue;
+}
+
+export interface ContextMenuItemViewProps {
+  children?: React.ReactNode;
+  selected: boolean;
+  hasSubmenu: boolean;
+  disabled: boolean;
+  className: string;
+  itemClasses: string;
+  handleClick: (_e: React.MouseEvent<HTMLDivElement>) => void;
+  handleKeyDown: (_e: React.KeyboardEvent<HTMLDivElement>) => void;
+}

app/components/ContextMenu/ContextMenuItem/ContextMenuItem.view.tsx

@@ -0,0 +1,71 @@
+import { forwardRef } from "react";
+import type { ContextMenuItemViewProps } from "./ContextMenuItem.types";
+
+export const ContextMenuItemView = forwardRef<
+  HTMLDivElement,
+  ContextMenuItemViewProps
+>(
+  (
+    {
+      children,
+      selected,
+      hasSubmenu,
+      disabled,
+      itemClasses,
+      handleClick,
+      handleKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={itemClasses}
+        role="menuitem"
+        tabIndex={disabled ? -1 : 0}
+        aria-current={selected ? "true" : undefined}
+        aria-disabled={disabled}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        <div className="flex items-center gap-[8px]">
+          {selected && (
+            <svg
+              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          )}
+          <span>{children}</span>
+        </div>
+        {hasSubmenu && (
+          <svg
+            className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        )}
+      </div>
+    );
+  },
+);
+
+ContextMenuItemView.displayName = "ContextMenuItemView";

app/components/ContextMenu/ContextMenuItem/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./ContextMenuItem.container";
+export type { ContextMenuItemProps } from "./ContextMenuItem.types";

app/components/ContextMenu/ContextMenuSection.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { forwardRef, memo } from "react";
+
+interface ContextMenuSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const ContextMenuSection = forwardRef<HTMLDivElement, ContextMenuSectionProps>(
+  ({ title, children, className = "", ...props }, ref) => {
+    const sectionClasses = `
+    ${className}
+  `
+      .trim()
+      .replace(/\s+/g, " ");
+
+    return (
+      <div ref={ref} className={sectionClasses} role="group" {...props}>
+        {title && (
+          <div className="px-3 py-2">
+            <div className="text-[var(--color-content-default-primary)] text-sm font-medium">
+              {title}
+            </div>
+          </div>
+        )}
+        {children}
+      </div>
+    );
+  },
+);
+
+ContextMenuSection.displayName = "ContextMenuSection";
+
+export default memo(ContextMenuSection);