Remove topBar prop from <TldrawUi /> (#2018)

This diff removes the UI top center bar from the public API and tweaks
some of the styling around the top bar as a whole. Now, the left and
right bars shrink to fit their content, and the center bar is unstyled
by us. It's also marked `@internal`.

This also exposes `<Spinner />` for internal use.

### Change Type

- [x] `minor` — New feature

### Test Plan

-

### Release Notes

- [BREAKING] removed topBar prop

apps/examples/src/examples/ZonesExample.tsx

@@ -4,7 +4,7 @@ import '@tldraw/tldraw/tldraw.css'
 export default function Example() {
 	return (
 		<div className="tldraw__editor">
-			<Tldraw shareZone={<CustomShareZone />} topZone={<CustomTopZone />} />
+			<Tldraw shareZone={<CustomShareZone />} />
 		</div>
 	)
 }
@@ -23,17 +23,3 @@ function CustomShareZone() {
 		</div>
 	)
 }
-
-function CustomTopZone() {
-	return (
-		<div
-			style={{
-				width: '100%',
-				backgroundColor: 'dodgerblue',
-				textAlign: 'center',
-			}}
-		>
-			<p>Top Zone</p>
-		</div>
-	)
-}

packages/tldraw/api-report.md

@@ -1051,6 +1051,9 @@ export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls): void;
 // @internal (undocumented)
 export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void;
 
+// @internal (undocumented)
+export function Spinner(props: React_2.SVGProps<SVGSVGElement>): JSX.Element;
+
 // @public (undocumented)
 function Sub({ id, children }: {
     id: string;
@@ -1230,6 +1233,7 @@ export interface TldrawUiBaseProps {
     hideUi?: boolean;
     renderDebugMenuItems?: () => React_2.ReactNode;
     shareZone?: ReactNode;
+    // @internal
     topZone?: ReactNode;
 }
 

packages/tldraw/src/index.ts

@@ -41,6 +41,7 @@ export {
 } from './lib/ui/TldrawUiContextProvider'
 export { setDefaultUiAssetUrls } from './lib/ui/assetUrls'
 export { ContextMenu, type TLUiContextMenuProps } from './lib/ui/components/ContextMenu'
+export { Spinner } from './lib/ui/components/Spinner'
 export { Button, type TLUiButtonProps } from './lib/ui/components/primitives/Button'
 export { Icon, type TLUiIconProps } from './lib/ui/components/primitives/Icon'
 export { Input, type TLUiInputProps } from './lib/ui/components/primitives/Input'

packages/tldraw/src/lib/ui.css

@@ -33,6 +33,7 @@
 	grid-row: 1;
 	display: flex;
 	min-width: 0px;
+	justify-content: space-between;
 }
 
 .tlui-layout__top__left {
@@ -42,19 +43,7 @@
 	justify-content: flex-start;
 	width: 100%;
 	height: 100%;
-	flex-shrink: 1;
-}
-
-.tlui-layout__top__center {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-start;
-	width: 100%;
-	height: 100%;
-	margin-left: var(--space-2);
-	flex-grow: 1;
-	min-width: 0px;
+	flex: 0 1 0;
 }
 
 .tlui-layout__top__right {
@@ -62,9 +51,8 @@
 	flex-direction: column;
 	align-items: flex-end;
 	justify-content: flex-start;
-	width: 100%;
 	height: 100%;
-	flex-shrink: 1;
+	flex: 0 0 auto;
 	min-width: 0px;
 }
 
@@ -1272,7 +1260,7 @@
 .tlui-toast__content {
 	padding-left: 0px;
 	padding-top: var(--space-4);
-	padding-bottom: var(--space-5);
+	padding-bottom: var(--space-4);
 	display: flex;
 	flex-direction: column;
 	gap: var(--space-3);

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

@@ -53,6 +53,7 @@ export interface TldrawUiBaseProps {
 
 	/**
 	 * A component to use for the top zone (will be deprecated)
+	 * @internal
 	 */
 	topZone?: ReactNode
 

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

@@ -1,5 +1,6 @@
 import React from 'react'
 
+/** @internal */
 export function Spinner(props: React.SVGProps<SVGSVGElement>) {
 	return (
 		<svg width={16} height={16} viewBox="0 0 16 16" {...props}>

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

@@ -31,8 +31,10 @@ function Toast({ toast }: { toast: TLUiToast }) {
 			)}
 			<div className="tlui-toast__main">
 				<div className="tlui-toast__content">
-					<T.Title className="tlui-toast__title">{toast.title}</T.Title>
-					<T.Description className="tlui-toast__description">{toast.description}</T.Description>
+					{toast.title && <T.Title className="tlui-toast__title">{toast.title}</T.Title>}
+					{toast.description && (
+						<T.Description className="tlui-toast__description">{toast.description}</T.Description>
+					)}
 				</div>
 				{toast.actions && (
 					<div className="tlui-toast__actions">