feat(editor): fold canvas display controls into one Display dropdown (#370)

Replace the seven separate display-control buttons in the canvas toolbar
(render, theme, edges, grid, shadows, units, camera) with a single
"Display" dropdown, matching the simplification already shipped in the
hosted editor. Grid, shadows, camera and units are direct toggles that
keep the menu open; render, edges and theme are submenus.

Portal DropdownMenuSubContent so the side-opening submenus escape the
parent content's overflow-x-hidden clip, and re-export the submenu
primitives (Sub/SubTrigger/SubContent/Separator) from @pascal-app/editor.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/editor/src/components/ui/primitives/dropdown-menu.tsx

@@ -197,15 +197,19 @@ function DropdownMenuSubContent({
   className,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  // Portalled so the side-opening submenu escapes the parent content's
+  // `overflow-x-hidden` clip (otherwise it renders but is invisible).
   return (
-    <DropdownMenuPrimitive.SubContent
-      className={cn(
-        '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 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in',
-        className,
-      )}
-      data-slot="dropdown-menu-sub-content"
-      {...props}
-    />
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        className={cn(
+          '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 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in',
+          className,
+        )}
+        data-slot="dropdown-menu-sub-content"
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
   )
 }
 

packages/editor/src/index.tsx

@@ -138,6 +138,10 @@ export {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from './components/ui/primitives/dropdown-menu'
 export { useSidebarStore } from './components/ui/primitives/sidebar'