Allow hiding debug panel. (#3261)

We allowed the users to customize pretty much all of our components, but
not the `DebugPanel`. We had overrides for `DebugMenu` which is
displayed inside the panel, but not for the panel itself.

I guess it makes sense to allow users to override both?

![CleanShot 2024-03-26 at 09 54
13](https://github.com/tldraw/tldraw/assets/2523721/c873fe85-7d01-4e4c-9324-70566dc3a4db)

Reported
[here](https://discord.com/channels/859816885297741824/1221663945627140157/1221663945627140157).

Fixes https://github.com/tldraw/tldraw/issues/3260

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [x] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Best way to test this is to check the `Hidden UI Components` example.
2. Play around with commenting out the `DebugPanel` and `DebugMenu`
overrides.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Allow users to fully override the `DebugPanel`.

apps/examples/src/examples/ui-components-hidden/UiComponentsHiddenExample.tsx

@@ -16,6 +16,7 @@ const components: Required<TLUiComponents> = {
 	KeyboardShortcutsDialog: null,
 	QuickActions: null,
 	HelperButtons: null,
+	DebugPanel: null,
 	DebugMenu: null,
 	SharePanel: null,
 	MenuPanel: null,

packages/tldraw/api-report.md

@@ -1493,6 +1493,7 @@ export const TldrawUi: React_2.NamedExoticComponent<{
         KeyboardShortcutsDialog: null | React_2.ComponentType<TLUiKeyboardShortcutsDialogProps>;
         QuickActions: null | React_2.ComponentType<TLUiQuickActionsProps>;
         HelperButtons: null | React_2.ComponentType<TLUiHelperButtonsProps>;
+        DebugPanel: null | React_2.ComponentType;
         DebugMenu: null | React_2.ComponentType;
         MenuPanel: null | React_2.ComponentType;
         TopPanel: null | React_2.ComponentType;
@@ -2520,6 +2521,7 @@ export function useTldrawUiComponents(): Partial<{
     KeyboardShortcutsDialog: ComponentType<TLUiKeyboardShortcutsDialogProps> | null;
     QuickActions: ComponentType<TLUiQuickActionsProps> | null;
     HelperButtons: ComponentType<TLUiHelperButtonsProps> | null;
+    DebugPanel: ComponentType | null;
     DebugMenu: ComponentType | null;
     MenuPanel: ComponentType | null;
     TopPanel: ComponentType | null;

packages/tldraw/api/api.json

@@ -17198,7 +17198,16 @@
             },
             {
               "kind": "Content",
-              "text": ">;\n        DebugMenu: null | "
+              "text": ">;\n        DebugPanel: null | "
+            },
+            {
+              "kind": "Reference",
+              "text": "React.ComponentType",
+              "canonicalReference": "@types/react!React.ComponentType:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        DebugMenu: null | "
             },
             {
               "kind": "Reference",
@@ -17639,7 +17648,7 @@
           "name": "TldrawUi",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 147
+            "endIndex": 149
           }
         },
         {
@@ -27963,7 +27972,16 @@
             },
             {
               "kind": "Content",
-              "text": "> | null;\n    DebugMenu: "
+              "text": "> | null;\n    DebugPanel: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ComponentType",
+              "canonicalReference": "@types/react!React.ComponentType:type"
+            },
+            {
+              "kind": "Content",
+              "text": " | null;\n    DebugMenu: "
             },
             {
               "kind": "Reference",
@@ -28009,7 +28027,7 @@
           "fileUrlPath": "packages/tldraw/src/lib/ui/context/components.tsx",
           "returnTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 55
+            "endIndex": 57
           },
           "releaseTag": "Public",
           "overloadIndex": 1,

packages/tldraw/src/lib/ui/TldrawUi.tsx

@@ -3,7 +3,6 @@ import { Expand, useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import React, { ReactNode } from 'react'
 import { TLUiAssetUrlOverrides } from './assetUrls'
-import { DebugPanel } from './components/DebugPanel'
 import { Dialogs } from './components/Dialogs'
 import { FollowingIndicator } from './components/FollowingIndicator'
 import { ToastViewport, Toasts } from './components/Toasts'
@@ -120,6 +119,7 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 		HelpMenu,
 		NavigationPanel,
 		HelperButtons,
+		DebugPanel,
 	} = useTldrawUiComponents()
 
 	useKeyboardShortcuts()
@@ -168,7 +168,7 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 								{Toolbar && <Toolbar />}
 								{HelpMenu && <HelpMenu />}
 							</div>
-							{isDebugMode && <DebugPanel />}
+							{isDebugMode && DebugPanel && <DebugPanel />}
 						</div>
 					</>
 				)}

packages/tldraw/src/lib/ui/components/DefaultDebugPanel.tsx

@@ -3,7 +3,7 @@ import { memo, useEffect, useRef, useState } from 'react'
 import { useTldrawUiComponents } from '../context/components'
 
 /** @internal */
-export const DebugPanel = memo(function DebugPanel() {
+export const DefaultDebugPanel = memo(function DefaultDebugPanel() {
 	const { DebugMenu } = useTldrawUiComponents()
 
 	return (

packages/tldraw/src/lib/ui/context/components.tsx

@@ -9,6 +9,7 @@ import {
 	TLUiContextMenuProps,
 } from '../components/ContextMenu/DefaultContextMenu'
 import { DefaultDebugMenu } from '../components/DebugMenu/DefaultDebugMenu'
+import { DefaultDebugPanel } from '../components/DefaultDebugPanel'
 import { DefaultHelpMenu, TLUiHelpMenuProps } from '../components/HelpMenu/DefaultHelpMenu'
 import {
 	DefaultHelperButtons,
@@ -45,6 +46,7 @@ export interface BaseTLUiComponents {
 	KeyboardShortcutsDialog: ComponentType<TLUiKeyboardShortcutsDialogProps>
 	QuickActions: ComponentType<TLUiQuickActionsProps>
 	HelperButtons: ComponentType<TLUiHelperButtonsProps>
+	DebugPanel: ComponentType
 	DebugMenu: ComponentType
 	MenuPanel: ComponentType
 	TopPanel: ComponentType
@@ -88,6 +90,7 @@ export function TldrawUiComponentsProvider({
 					KeyboardShortcutsDialog: DefaultKeyboardShortcutsDialog,
 					QuickActions: DefaultQuickActions,
 					HelperButtons: DefaultHelperButtons,
+					DebugPanel: DefaultDebugPanel,
 					DebugMenu: DefaultDebugMenu,
 					MenuPanel: DefaultMenuPanel,
 					..._overrides,