Feat/context menu #190
Feat/context menu #190
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughA new 8-bit styled context menu component suite was implemented using Radix UI primitives and custom pixel-art theming. This includes a full set of React components, documentation, and a demo page. The navigation, registry, and metadata were updated to include the new component, and the necessary Radix UI dependency was added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ContextMenuTrigger
participant ContextMenuContent
participant ContextMenuItem
User->>ContextMenuTrigger: Right-clicks trigger element
ContextMenuTrigger->>ContextMenuContent: Opens context menu
ContextMenuContent->>User: Displays menu items (Profile, Billing, etc.)
User->>ContextMenuItem: Selects a menu item
ContextMenuItem->>ContextMenuContent: Handles selection (e.g., closes menu)
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
app/docs/components/context-menu/page.tsxOops! Something went wrong! :( ESLint: 9.26.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. config/nav-items.tsOops! Something went wrong! :( ESLint: 9.26.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting. lib/metadata.tsOops! Something went wrong! :( ESLint: 9.26.0 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in " » eslint-config-next/core-web-vitals » /node_modules/.pnpm/eslint-config-next@15.3.2_eslint@9.26.0_jiti@2.4.2__typescript@5.8.3/node_modules/eslint-config-next/index.js". If you still can't figure out the problem, please see https://eslint.org/docs/latest/use/troubleshooting.
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
app/docs/components/context-menu/page.tsx (1)
78-88: Usage snippet should import all subcomponents
The snippet only imports{ ContextMenu }but the example above usesContextMenuTrigger,ContextMenuContent, andContextMenuItem. Consider updating the snippet to:import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, } from "@/components/ui/8bit/context-menu"components/ui/8bit/context-menu.tsx (4)
48-61: Consider applying 8-bit styling to SubContent componentThe ContextMenuSubContent lacks the distinctive 8-bit styling (thick borders, pixelated edges) that you've applied to the main ContextMenuContent. This creates an inconsistent visual experience when submenus are opened.
<ContextMenuPrimitive.SubContent ref={ref} className={cn( - "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]", + "z-50 min-w-[8rem] overflow-hidden rounded-md border-x-4 border-y-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]", + pressStart.className, className )} {...props} />
120-195: Creative pixelated checkmark implementationThe SVG-based pixelated checkmark is a perfect match for the 8-bit theme. However, there is an opportunity to optimize this implementation:
Consider extracting this SVG to a separate component or constant to improve code readability and maintainability. This would also make it easier to reuse the icon elsewhere if needed.
// Example of how you could extract this to a constant const PixelCheckmarkIcon = ( <svg width="50" height="50" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" strokeWidth="0.25" aria-label="check" className="size-9" > {/* Rect elements here */} </svg> ); // Then use it in the component: // <ContextMenuPrimitive.ItemIndicator> // {PixelCheckmarkIcon} // </ContextMenuPrimitive.ItemIndicator>
204-224: Consider a more 8-bit style for radio indicatorsWhile the Circle icon works, it doesn't match the pixel-art aesthetic of the checkmark you created for checkbox items. Consider creating a similarly pixelated radio indicator.
<ContextMenuPrimitive.ItemIndicator> - <Circle className="size-2 fill-current" /> + <svg + width="50" + height="50" + viewBox="0 0 256 256" + fill="currentColor" + xmlns="http://www.w3.org/2000/svg" + aria-label="radio selected" + className="size-9" + > + <rect x="112" y="112" width="32" height="32" rx="1" /> + </svg> </ContextMenuPrimitive.ItemIndicator>
218-218: Add aria-label to radio indicator for accessibilityThe checkbox indicator has an aria-label="check", but the radio indicator is missing a similar accessibility label.
- <Circle className="size-2 fill-current" /> + <Circle className="size-2 fill-current" aria-label="radio selected" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/assets/8bitcn-context-menu-light.pngis excluded by!**/*.png
📒 Files selected for processing (7)
app/docs/components/context-menu/page.tsx(1 hunks)components/ui/8bit/context-menu.tsx(1 hunks)config/nav-items.ts(1 hunks)lib/metadata.ts(1 hunks)package.json(1 hunks)public/r/8bit-context-menu.json(1 hunks)registry.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/ui/8bit/context-menu.tsx (2)
config/fonts.ts (1)
pressStart(3-6)lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (10)
package.json (1)
19-19: Dependency addition is consistent
The new@radix-ui/react-context-menu@^2.2.14entry is placed alphabetically between@radix-ui/react-collapsibleand@radix-ui/react-dialog, and aligns with the other Radix v2 packages (e.g.,@radix-ui/react-dropdown-menu@^2.x). No version conflicts spotted.lib/metadata.ts (1)
52-52: Context menu metadata added correctly
ThecontextMenuMetaDataconstant follows the established naming convention and alphabetical placement afterdatePickerMetaData. Please verify that the asset file/assets/8bitcn-context-menu-light.pngexists in the public assets directory.config/nav-items.ts (1)
78-82: Navigation item for Context Menu is correct
The new "Context Menu" entry is inserted immediately after "Command" and before "Collapsible", with the proper URL andnew: trueflag. This will make the docs page discoverable alongside other components.registry.json (1)
412-425: Registry entry for 8-bit Context Menu looks good
The new"8bit-context-menu"component declaration adheres to the schema, includes no registry dependencies, and correctly points tocomponents/ui/8bit/context-menu.tsx.app/docs/components/context-menu/page.tsx (4)
3-10: Imports of metadata and ContextMenu primitives are accurate
The paths@/lib/metadataand@/components/ui/8bit/context-menualign with the new files, and the Radix primitives are correctly destructured.
18-24: Page metadata setup is correct
UsingcontextMenuMetaDataforopenGraph.imagesensures the right preview image. Titles and descriptions match the component context.
52-62: Interactive example usage is correct
The<ContextMenu>,<ContextMenuTrigger>,<ContextMenuContent>, and<ContextMenuItem>subcomponents are used as intended, demonstrating the 8-bit styling in a minimal scenario.
68-72: InstallationCommands configuration is valid
Passing the dynamicpackageUrlviaNEXT_PUBLIC_BASE_URLmatches the registry descriptor and will render the correct install instructions.components/ui/8bit/context-menu.tsx (2)
1-13: Excellent setup for the 8-bit styled component!The imports are appropriate, and the "use client" directive is correctly placed at the top for Next.js client components. Using the Press_Start_2P font is perfect for achieving the 8-bit aesthetic.
63-85: Great implementation of the 8-bit border effect!The layered approach using a relative container with an absolute-positioned border overlay creates an authentic 8-bit appearance. The use of Portal is also appropriate for ensuring the menu isn't constrained by parent containers.
| export default function ButtonPage() { | ||
| return ( | ||
| <div className="flex flex-col gap-4"> | ||
| <div className="flex flex-col md:flex-row items-center justify-between gap-2"> | ||
| <h1 className="text-3xl font-bold">Context Menu</h1> | ||
| <CopyCommandButton | ||
| copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-context-menu.json`} | ||
| command={"pnpm dlx shadcn@canary add 8bit-context-menu"} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
Component function name should reflect Context Menu
The default export is named ButtonPage, which appears copied from another page. For clarity and consistency, rename it to something like ContextMenuPage.
🤖 Prompt for AI Agents
In app/docs/components/context-menu/page.tsx around lines 26 to 35, the default
exported component function is named ButtonPage, which does not reflect the
content of the page. Rename the function from ButtonPage to ContextMenuPage to
improve clarity and maintain consistency with the page's purpose.
| { | ||
| "$schema": "https://ui.shadcn.com/schema/registry-item.json", | ||
| "name": "8bit-context-menu", | ||
| "type": "registry:component", | ||
| "title": "8-bit Context Menu", | ||
| "description": "A simple 8-bit context menu component", | ||
| "registryDependencies": [], | ||
| "files": [ | ||
| { | ||
| "path": "components/ui/8bit/context-menu.tsx", | ||
| "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Press_Start_2P } from \"next/font/google\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst pressStart = Press_Start_2P({\n weight: [\"400\"],\n subsets: [\"latin\"],\n})\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n <ContextMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronRight className=\"ml-auto size-4\" />\n </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n <ContextMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n className\n )}\n {...props}\n />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n React.ComponentRef<typeof ContextMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <ContextMenuPrimitive.Portal>\n <div className=\"relative\">\n <ContextMenuPrimitive.Content\n ref={ref}\n className={cn(\n \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border-x-4 border-y-6 border-foreground dark:border-ring bg-popover p-1 text-popover-foreground animate-in fade-in-80 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]\",\n pressStart.className,\n className\n )}\n {...props}\n />\n <div\n className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n aria-hidden=\"true\"\n />\n </div>\n </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n React.ComponentRef<typeof ContextMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n <ContextMenuPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <ContextMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuPrimitive.ItemIndicator>\n <svg\n width=\"50\"\n height=\"50\"\n viewBox=\"0 0 256 256\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\"\n strokeWidth=\"0.25\"\n aria-label=\"check\"\n className=\"size-9\"\n >\n <rect\n x=\"80\"\n y=\"128\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n transform=\"rotate(90 80 128)\"\n ></rect>\n <rect\n x=\"96\"\n y=\"144\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n transform=\"rotate(90 96 144)\"\n ></rect>\n <rect\n x=\"112\"\n y=\"160\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n transform=\"rotate(90 112 160)\"\n ></rect>\n <rect\n x=\"128\"\n y=\"144\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n transform=\"rotate(90 128 144)\"\n ></rect>\n <rect\n x=\"144\"\n y=\"128\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n transform=\"rotate(90 144 128)\"\n ></rect>\n <rect\n x=\"160\"\n y=\"112\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n transform=\"rotate(90 160 112)\"\n ></rect>\n <rect\n x=\"176\"\n y=\"96\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n transform=\"rotate(90 176 96)\"\n ></rect>\n <rect\n x=\"192\"\n y=\"80\"\n width=\"14\"\n height=\"14\"\n rx=\"1\"\n transform=\"rotate(90 192 80)\"\n ></rect>\n </svg>\n </ContextMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n <ContextMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:border-y-4 focus:border-foreground h-8 focus:dark:border-ring border-dashed focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <ContextMenuPrimitive.ItemIndicator>\n <Circle className=\"size-2 fill-current\" />\n </ContextMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n React.ComponentRef<typeof ContextMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n <ContextMenuPrimitive.Label\n ref={ref}\n className={cn(\n \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n React.ComponentRef<typeof ContextMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <ContextMenuPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n {...props}\n />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\n \"ml-auto text-xs tracking-widest text-muted-foreground\",\n className\n )}\n {...props}\n />\n )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n", | ||
| "type": "registry:component", | ||
| "target": "components/ui/8bit/context-menu.tsx" | ||
| } | ||
| ] | ||
| } No newline at end of file |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Proper registry configuration for the component
The registry configuration is well-structured with appropriate metadata. However, embedding the entire component code directly in the JSON file creates a maintenance challenge.
When the component is updated, you'll need to update both the original file and this registry JSON. Consider using a build script that can automatically generate or update the registry file from the component source to avoid synchronization issues.
🤖 Prompt for AI Agents
In public/r/8bit-context-menu.json lines 1 to 16, the entire component code is
embedded directly in the JSON registry file, which makes maintenance difficult
and error-prone. To fix this, remove the full component code from the JSON file
and instead reference the component source file path only. Implement a build
script or automation that extracts or syncs the component code into the registry
file as needed, ensuring the registry stays up-to-date without manual
duplication.
Summary by CodeRabbit